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本 章 主 要 讲解 了 关于 APP 界面 的 一 些 基 础 知识 ， 学 习 这 些 基 
础 知识 可 以 使 读者 在 学 习 本 书 之 前 ， 对 APP UI 有 所 了 解 并 产生 
初步 的 兴趣 ， 为 以 后 的 学 习 打 下 良好 基础 。 


了 解 APP UI 设计 

了 解 APP UI 设计 师 需要 擎 握 的 技术 
a 全 | 国 帮 各 下 二 及 让 

不 同 的 APP UI 设计 风格 

APP UI 优秀 作品 
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第 1 章 APP Ul 设计 基础 


1.1 
APP Ul 设计 概述 


本 下 介绍 APP 界 面 的 应 用 领域 ， 包 含 什么 是 APP UI 设计 、 手 机 UI 和 平面 0I 的 不 同 、 什 么 是 APP 
客户 端 、 智 能 手机 的 操作 系统 有 哪些 、Photoshop 与 手机 UI 的 关系 、UI 设 计 的 重要 性 等 内 容 。 
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UI 可 以 翻译 为 用 户 界面 。UI 设 计 不 仅仅 是 指 界面 美化 设计 ， 从 文字 的 意思 上 能 够 看 出 ，UI 
还 与 “用 户 与 界面 ”有 直接 的 交互 关系 。 也 就 是 说 ，UI 设 计 不 仅仅 是 为 了 美化 界面 ， 它 还 需要 
研究 用 户 的 使 用 习惯 ， 让 界面 变 得 更 简洁 、 易 用 、 每 适 。 

用 户 界面 无 处 不 在 ， 它 可 以 是 软件 操作 界面 ， 也 可 以 是 用 户 登 录 界 面 ， 无 论 是 在 手机 还 是 


在 PC 机 上 都 有 它 的 存在 ， 如 图 所 示 。 
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world. 


1.1.2 什么 是 APP 


APP 是 Application 的 简写 ， 即 手机 应 用 程序 ， 也 被 称 为 应 用 。 上 右 图 中 是 Android 系 统 的 客 
户 端 图 标 展 示 ， 每 一 个 图 标 代 表 一 个 APP， 这 些 APP 都 有 特定 的 用 途 ， 如 清理 手机 的 安全 卫士 、 
网 页 浏览 的 相关 浏览 器 、 播 放 音乐 的 音 视频 播放 器 、 中 文 输 入 的 拼音 或 笔画 输入 法 等 。APP 通 和 常 
分 为 个 人 用 户 APP 与 企业 级 APP。 个 人 用 户 APP 是 面向 个 人 消费 者 的 ， 而 企业 级 APP 则 是 面向 企业 
用户 珊 发 J。 
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Photoshop APP Ul 设计 从 入 门 到 精通 
1. 1.3 用 于 制作 APP U1 的 Photoshop 软 件 


Photoshop 人 简称 PS$， 是 一 款 功 能 强大 的 图 形 图 像 处 理 软件 ， 下 图 为 Adobe Photoshop 主 
pa 


本 书 是 以 Photoshop APP UI 设 计 为 主题 ， 首 先 就 应 该 了 解 Photoshop 与 智能 手机 UI 之 间 的 
在 使 用 UI 设 计 来 美化 界面 的 时 候 ， 比 下 

较 常用 的 工具 软件 就 是 Photoshop， 当 然 这 》 

也 是 根据 设计 者 的 喜好 而 决定 的 。 但 是 对 : . 

于 初学 者 来 说 ， 掌 握 Photoshop 软 件 会 比 其 SN 

他 图 形 图 像 处 理 软件 更 容易 些 ， 因 此 我 们 : RS 


使 用 Photoshop 软 件 作为 本 书 的 写作 基础 。 =: et te 
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1.2 
APP UI 设计 师 需 要 掌握 哪些 技术 
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师 、APP UI 设计 师 、 移 动 UI 设 计 师 和 WEB APP UI 设计 制作 等 。 这 些 职 位 的 要 求 都 是 大 同 小 异 ， 
基 求 列 耽 求 由 加 。 

(1) 移动 手机 客户 端 软 件 及 WAP 与 WEB 网 站 的 美术 创意 、UI 界 面 设计 ， 把 握 软 件 的 整体 及 视 


(27 准确 理解 房 品 斋 求 相 人 交 豆 原型 配合 业 程 师 进 行 于 机 软件 及 WAPNIWEB 窜 面 优化 ,设计 
出 优质 用 户 体 验 的 界面 效果 图 。 

(3) 珊 练 掌握 手机 客户 端 软 件 UI 制 作 技 术 ， 能 够 台 练 使 用 各 种 设计 软件 (例如 
Photoshop、Illustrator、Dreamweaver、Flash 等 ) 。 还 要 有 优秀 的 用 户 界 面 设 计 能 力 ， 对 视 
知 设 计 、 人 色彩 有 敏锐 的 观察 力 及 分 析 能 

(4) 为 产品 推广 和 形象 设计 服务 ， 关 注 所 负 贡 的 产品 设计 动 回 ， 为 产品 提供 专业 的 美术 意 
见 及 建议 。 
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(6) 其 他 与 美术 设计 、 多 媒体 设计 相关 的 工作 ， 与 设计 团队 元 分 沟通 ， 推 动 提高 团队 的 设 
a 

当 我 们 看 到 上 和 面 这 些 APP UI 设计 要 求 时 ,会 让 我 们 想到 了 网 页 美工 的 任职 要 求 。 其 实 ， 它 
们 之 间 大 体 上 是 相同 的 。 唯 一 的 区 别 束 在 于 APP UI 设 计 针 对 的 是 移动 手机 客户 内 的 界面 设计 ， 
包括 10S5，Android，WP 等 界面 设计 。 互 联网 设计 趋势 在 于 产品 的 用 户 体验 设计 ， 谁 的 产品 体验 
做 得 好 ， 谁 束 能 有 一 局 之 地 ! 而 用 户 体 验 设 计 的 重点 在 于 界面 的 设计 ， 因 此 移动 客户 问 的 界面 
设计 从 而 显得 更 加 重要 。 
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1.3 
出 色 的 APP UI 界面 设计 


想 要 设计 出 优秀 的 APP 界 面 ， 首 先 应 该 从 设计 团队 入 手 。 本 下 将 为 大 家 呈现 APP 设 计 与 产品 
团队 的 关系 。 

有 些 人 认为 APP 设 计 束 是 一 个 独立 的 个 体 ， 只 要 由 设计 者 单独 设计 出 来 就 可 以 了 ， 但 是 不 能 
忽视 一 个 问题 ， 那 融 是 APP 界 面 同 时 也 属于 产品 团队 ， 如 案 没 有 产品 团队 的 配售， 最 终 也 无 法 发 
挥 界面 的 优势 。 因 此 ， 想 要 设计 出 优秀 的 APP 界 面 ， 要 从 了 解 团 队 开 始 。 
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1.3.1 APP 界 面 设计 者 与 产品 团队 


关于 产品 团队 人 员 的 划分 ， 下 面 引用 当前 UI 设计 行业 中 比较 认可 的 一 种 划分 方式 。 

产品 经 理 : 产品 团队 的 领头 人 物 ， 对 用 户 的 需求 进行 细致 研究 ， 针 对 厂 大 用 户 的 需求 进行 
规划 ， 然 后 将 规划 提交 给 公司 高 屋 ， 公 司 高 层 将 会 为 本 次 项 目 提供 人 力 、 物 力 、 财 力 等 资源 。 
产品 经 理 常用 的 软件 主要 是 PPT、Project 和 Visio 等 。 

广 辣 设计 映 : 六 品 充 计 映 中 要 在 所 功能 说 讳 廊 加 ,| 考 虑 瓜 术 是 耕 基 有 同行 性 。 浊 用 软件 有 
Word 和 Axure。 

用 户 体 验 师 : 用 户 体验 师 需 要 了 解 商业 层面 内 的 东西 ， 应 该 从 商业 价值 的 朋 度 出 发 ， 对 产品 
与 用 户 交 互 方面 进行 改善 。 币 用 软件 有 Dreamweaver 等 。 

Ul 设计 师 : 主要 是 对 用 户 界 面 进 行 美化 ， 常 用 软件 有 Photosho、Iuustrator 等 。 

DAE 4 A Nm RD TE ke i AN A Ei 0) or A AG HT a 2 NN A I A 
都 能 做 到 职责 划分 明确 。 


1.3.2 APP 界 面 设 计 与 项 目 流程 


在 一 个 手机 APP 产 品 团 队 中 ， 通 常 APP 界 面 的 设计 者 在 前 期 中 束 应 该 加 入 到 团队 中 ， 参 与 产 
品 定位 、 设 计 风 格 、 颜 色 、 控 件 等 多 方面 问题 的 讨论 。 这 样 做 可 以 使 设计 者 充分 了 解 产 品 的 设 
计 风 格 ， 从 而 设计 出 成 熟 可 用 的 APP 界 面 。 

QD pri a fn 

产品 的 功能 是 什么 ? 依据 什么 而 做 这 样 的 产品 ? 要 达到 什么 影响 ? 

(2) 产品 风格 

产品 定位 直接 影响 产品 风格 。 根 据 产品 的 功能 、 商 业 价值 等 内 容 ， 可 以 产生 许多 不 同 的 风 
格 。 当 产品 是 以 面向 人 和 群 为 定位 ， 那 产品 的 风格 应 该 是 清新 、 绚 丽 的 ; 当 产 品 是 以 商业 价值 为 
定位 ， 那 产品 的 风格 应 该 是 稳重 、 大 和 气 的 。 
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(BD eh 

对 产品 界面 用 下 拉 菜 单 还 是 下 拉 滑 屏 ， 用 多 选 框 还 是 滚动 条 ， 控 件 的 数量 应 该 限制 在 多 少 个 
a 

(4) 制定 方案 

当 产 品 的 定位 、 风 格 和 控件 确定 后 ， 残 需要 开始 制定 方案 。 一 般 需 要 做 出 两 套 以 上 的 方 
a Ny a 

(aD de fs 

将 方案 提交 后 ， 邀 请 各 方 人 士 来 进行 评定 ， 从 而 选 出 最 佳 方案 。 

(6) 美化 方案 

将 方案 选 定 以 后 ， 束 可 以 根据 效果 图 进行 天 化 设计 本。 


1.3.3 视 完 设计 


当 原 型 完成 后 ， 束 可 以 进行 视觉 设计 了 。 通 过 视觉 的 直观 感觉 对 原型 设计 进行 加 工 ， 比 如 
可 以 在 茶 些 元 素 上 进行 加 工 ， 如 文本 、 按 钮 的 背景 、 局 光 等 。 
在 没有 想法 的 时 候 ， 可 以 多 参看 其 他 优秀 的 APP 设 计 ， 来 为 目 己 的 设计 找 些 灵 感 。 
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1.4 
不 同 的 APP UI 设计 风格 
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1.5 
APP UI 优秀 作品 欣赏 


ORORORGEYG) 


September » 


1.6 
APP UI 设计 师 的 就 业 前 景 


移动 手机 UI 设计 已 经 开始 受到 众多 设计 师 的 青睐 ， 原 因 有 以 下 两 点 。 


第 一 ，APP UI 设计 是 一 个 办 新 的 职位 ， 也 是 设计 师 妃 求 独 鲜 刺激 感觉 的 驱动 力 ， 更 具有 挑 
战 性 。 


和 


第 二 ， 一 个 新 的 热门 职业 伴随 看 的 丈 古 局 新 。 
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本 章 主 要 讲解 了 关于 APP 界面 的 一 些 设 计 理 论 知 识 ， 了解 这 
些 设 计 理 论 知 识 可 以 使 读者 更 系统 地 了 了 了解 人 PP 界面 设计 方面 的 
专业 知识 。 和 这 样 才能 设计 出 优秀 的 且 被 大 众 吝 欢 的 作品 。 


生生 049 性 到 小 

了 解 APP UI 界面 布局 
了 解 APP UI 设计 要 求 
怎样 设计 一 个 成 功 的 错 面 
学 习 APP UI 配色 
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2.1 
用 户 操作 习惯 


用户 在 面 对 移 劲 应 用 时 ,心态 有 以 下 吉大 特征 由 是 徽 任 务 洛 用 记 通 币 个 会 重生 机 与 
入 论 文 ， 也 不 会 从 头 到 尾 看 一 部 电影 ， 使 用 是 随时 随地 进行 相关 活动 。 二 和 是 得 看 周围 情况 ， 也 
驶 是 个 人 所 处 的 环境 。 可 能 会 打开 手机 ， 看 有 什么 好 的 饭馆 ， 有 什么 好 的 电影 ， 打 折 团 购 等 。 
三 是 打发 无 聊 时 间 ， 大 多 移动 用 户 在 无 聊 时 会 打开 手机 ， 从 左 到 右 地 翻 ， 翻 到 最 后 再 把 手机 关 
挤 。 针 对 这 三 种 特征 应 该 怎么 样 去 面 对 ? 第 一 ， 应 用 最 好 是 小 而 准 ， 不 要 大 而 全 。 越 全 的 功能 
应 用 ， 只 能 代表 看 这 个 应 用 在 各 方面 部 很 平庸 。 第 二 ， 要 满足 用 户 的 情景 需求 。 第 二 ， 要 帮助 
国人 诈 冯 wb la 


2.2 
界面 布局 


一 般 来 说 ， 手 机 屏幕 是 从 上 往 下 布局 的 ， 重 要 的 信息 会 放 在 上 方 。 但 是 在 操作 上 ， 大 部 
分 人 名 是 单 志 委 击 机 刚 章 霜 攀 操作 贾 族 任 窍 面 鸭 届 宙 风 融 外 还 有 下 人 原则 风 三 外 的 条 红 单位， 
一 般 是 44 个 像 票 。 如 果 再 小 ， 人 的 拇指 难以 触 碰 ， 容 易 引 发 误 操 作 。 同 时 ， 也 不 要 让 界面 太 拥 
挤 。 比 如 大 家 熟悉 的 10S 的 加 面 ， 最 主要 的 操作 是 在 最 下 面 ， 常 用 的 四 个 按钮 ， 上 面 的 内 容 可 以 
来 回 谓 动 进行 选择 。 微 信 的 操作 也 是 在 下 面 ， 重 要 的 信息 一 一 个 人 聊天 内 容 会 放 在 上 方 。 


重要 的 信息 


Ly 


第 2 章 APP UI 设计 理论 


2.3 
操作 简单 


由 于 用 户 更 多 和 需要 微 任务 ， 同 时 还 要 打发 无 聊 时 间 ， 所 以 要 尽量 让 APP 变 得 简单 。 但 设计 更 
重音 的 体验 ， 往 往 意味 看 要 退 求 更 极端 的 目标 。 因 为 需要 充分 理解 用 户 的 需求 ， 理 解 他 现在 想 
要 什么 ， 理 解 他 现在 的 心态 是 什么 ， 理 解 他 的 情绪 是 什么 。 


2.3.1 隐藏 或 删除 


不 太 重 要 ， 但 是 又 是 必要 的 东西 ， 可 以 把 它 隐藏 起 来 ， 无 关 紧 要 的 东西 ， 能 删 掉 就 删 掉 ， 
不 要 把 什么 东西 都 塞 给 用 户 。 比 如 邮件 应 用 中 ， 已 发 邮件 、 草 稿 、 已 删除 这 些 功能 ， 对 一 般 用 
户 来 说 ， 在 最 常用 的 场景 里 面 ， 这 些 是 不 重要 的 ， 但 是 不 可 能 把 它 去 掉 ， 就 可 以 隐藏 在 下 面 。 
而 签名 、 外 出 自动 回复 等 功能 是 更 加 不 太 使 用 的 ， 可 以 把 它 藏 得 更 深 。 再 比如 Path 这 个 软件 把 
五 个 常用 的 按钮 ， 集 成 到 “+” 里 。 点 击 “+” 以 后 ， 有 拍照 、 音 乐 等 功能 。 而 界面 上 ， 打 开 这 
个 应 用 ， 最 直观 的 就 是 最 主要 的 信息 ， 没 有 其 他 的 干扰 。 比 如 之 前 有 多 少 人 看 过 我 的 图 片 ， 它 
把 这 个 信息 直接 集成 在 图 片 右上 角 ， 没 有 占据 太 多 地 方 ， 点 击 之 后 ， 可 以 发 表情 、 评 论 、 直 接 
删除 等 ， 做 到 了 隐藏 ， 是 个 非常 干净 、 漂 亮 的 页 面 。 

2. 3.2 区 分 内 容 或 功能 

以 “酒店 管家 ”为 例 ， 酒 店 图 片 、 服 务 设施 、 价 格 等 是 最 主要 的 内 容 ， 放 在 首要 位 置 ; 点 
评 放 在 了 其 次 ， 然 后 是 交通 状况 、 周 边 设施 等 ， 有 一 个 明确 的 分 区 。 用 户 一 旦 知道 了 这 种 分 区 
方式 ， 下 次 再 点 开 这 个 应 用 时 ， 想 看 哪个 ， 他 的 眼睛 会 直接 落 在 那儿 。 用 户 其 实 希 望 看 到 的 是 
开发 者 直接 给 他 们 一 个 非常 简单 、 不 用 去 记 、 不 用 去 选择 的 东西 。 


2.4 
在 操作 方式 上 创新 


呈 则 大局 现在 和 在 基 全 包 看 得 和 下 击 到 但 侧 各 粳 甩 国术 下 区 是 是 但 加 | 妆 局 凯 轩 和 狐 抒 
Wo A eA 0 A a ee a RR | a eae, 
显示 该 区 域内 的 商户 。 这 种 方式 特别 直观 ， 而 且 用 户 想 怎么 样 就 怎么 样 ， 想 画 一 个 五 角 星 就 画 
个 五 角 星 ， 想 画 一 条 线 也 可 以 ， 它 只 给 你 想 要 地 方 的 那些 内 容 ， 这 束 是 一 种 创新 。 


2.5 
在 设计 中 投入 情感 


什么 样 的 设计 师 、 什 么 样 的 团队 才 算 优 邦 ? 优秀 的 标准 之 一 束 古 设计 者 要 对 设计 的 应 用 投 
DO a i eran a 
等 舱 和 经 济 舱 两 个 选项 。 经济 舱 是 一 个 普通 的 人 ， 而 头等 舱 是 一 个 戴 看 帽子 ， 系 看 岛 结 ， 胸 前 
别 春 手 由 的 人 ， 很 酷 的 老板 形象 ， 体 现 出 了 头等 舱 和 经 济 舱 之 间 的 区 别 。 要 坐 头 等 通 的 人 ， 一 
般 都 愿意 看 到 目 己 是 这 样 的 形象 。 


点 
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2.6 
APP UI 的 配色 理论 


2.6.1 如 何 配色 


Pea sb A se a i pg ep a 
少 占 70%。 关 于 色彩 构成 和 基本 原理 的 书籍 有 很 多 ， 讲 得 也 很 详细 ， 此 处 不 再 资 述 。 在 这 里 ， 
主要 讲解 如 何 制作 配色 色 卡 。 

对 于 初学 设计 的 人 来 说 ， 经 第 为 使 用 什么 样 的 磊 色 而 烦恼 。 他 们 做 的 画面 要 不 束 是 颜色 用 
得 太 多 ， 显 得 太 过 化 哨 和 价 气 ， 要 不 殉 是 只 用 同一 个 色相 ， 使 画面 显得 既 单 调 义 没有 活力 。 

乱用 色 和 不 敢 用 色 成 为 初学 者 的 一 个 通病 。 我 们 大 可 不 必 纠 结 这 个 问题 ， 癌 真实 世界 中 
的 配色 去 和 学习， 多 看 看 大 目 然 的 类 丽 景致 ， 然 后 归纳 总 绪 出 一 套 目 己 的 配色 色 卡 ， 以 供 日 后 
用， 

大 家 或 许 都 知道 ， 黑 、 和 日 、 灰 这 3 个 颜色 可 以 调和 各 种 无 彩色 。 大 目 然 的 美 是 干 变 万 化 
的 ， 这 就 要 求 设计 师 必须 拥有 一 颖 捕捉 美的 心 。 就 拿 天 空 来 举例 ， 要 是 有 人 问 你 天 空 是 什么 颜 
色 的 ,很 多 人 部 回答 蓝 色 ， 可 是 如 果 你 仔细 观察 就 会 发 现 ， 天 空 的 颜色 是 十 变 万 化 、 色 彩 斑 
a Te ee eh ed A 2 a se aN a 
解 一 一 再 构成 ”的 忆 术 。 

大 目 然 的 色彩 是 丰富 多 彩 的 ， 很 多 人 造物 在 自然 光线 下 也 会 呈现 出 特别 和 谐 的 色彩 搭配 。 


比如 讲 蓝 的 大 海 、 红 色 的 疙 器 、 贡 色 的 花 赤 等， 在 目 然 光 的 照 揣 下 ， 它 们 都 会 表现 出 丰富 的 色 
彩 细 让 。 


了 网 旺 
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2. 6. 2 配色 实战 


不 官 在 哪个 平 全 下， 面 ~ 般 古 由 主 色 调 、 辅 色 调 、 凡 睛 色 和 再 达 色 四 部 分 构成 有 的 ,| 黄 
中 ， 主 色调 在 画面 中 的 作用 是 无 可 取代 的 。 有 时 候 ， 色 卡 可 以 很 方便 地 帮 你 找到 哪 一 类 的 画面 
需要 什么 样 的 主 色调 。 但 是 我 们 也 要 多 积累 一 些 ， 活 学 活用 。 这 样 不 仅 可 以 目 己 增加 和 减少 色 
块 比 重 来 调整 整个 画面 ， 还 可 以 为 了 达到 增加 颜色 细节 的 目的 使 用 两 张 相似 的 色 卡 。 接 下 来 ， 
我 们 来 看 一 些 配 色 卡 和 画面 实例 的 色调 。 


AUBURN UNIVERSITY 


赣 色 和 上 白色 调和 ， 有 是 看 起 来 很 权威 很 官方 的 配色 。 需 要 注意 的 是 ， 这 个 蓝 色 不 是 科技 丫 。 


nll 
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彩虹 糖 末 色 和 黑色 调和 ， 是 一 种 梦 筷 活 沁 的 鲜艳 配色 。 一 般 情况 下 ， 比 较 膨 的 彩虹 人 色 显 得 
很 粉 很 髓 ,在 加 入 大 面积 协调 色调 后 ， 画 面 就 显得 很 美 。 
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橙色 和 赣 色 调和 ， 杰 色 和 监 色 对 比 得 和 谐 统 一 ， 不 仅 显 得 有 活力 ， 而 且 感 党 很 有 时 间 感 。 
因为 橙色 和 紧 色 是 互补 色 ， 要 是 使 用 得 不 好 就 会 显得 很 俗气 。 图 中 这 些 作 品 ， 有 举 在 橙色 里 加 
了 了 米色， 有 些 则 在 蓝 色 里 加 了 深 巡 ,用 来 拉 开 色相 上 的 冲突 ， 整 体 效 果 部 非 第 好 。 
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绿色 和 白色 调和 ， 绿 色 和 白色 调和 后 是 一 种 自然、 优雅 的 清新 配色 。 图 中 的 这 两 幅 作 品 痢 
Des el 


而 下 右 图 中 作品 里 的 绿叶 元 队 以 及 灰色 有 亲 单 的 有 党 乓 部 让 其 显得 典雅 清新 。 
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红色 和 黑色 调和 ， 红 色 和 黑色 调和 后 形成 
一 种 金属 冷色 + 热烈 的 红色 的 对 比 配 色 。 右 图 
中 的 作品 首先 运用 品 、 日 、 灰 的 金属 色调 米 体 
现 出 科技 感 ， 然 后 又 用 热烈 、 奔 放 的 红色 来 体 
a as a A 
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本 章 主 要 讲解 了 关于 人 PP 界面 的 设计 技巧 知识 .学 习 和 这 些 设 
计 技 巧 梧 以 使 读者 充分 了 了 解 APP UI 的 设计 流程 、 图 标的 设计 流 
程 以 及 -如何 将 图 标 设 计 得 更 具 吸 引力 的 相关 技巧 。 


APP UI 设计 流程 
图 标 设计 流程 
怎样 制作 更 有 吸引 力 的 图 标 


Username: 
E=mail Address: 
Password: 


Retype Password: 


E-mail Address: 


| ER 
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3.1 
完整 的 APP UI 设计 流程 


随 看 人 类 社会 逐步 同 非 物质 社会 近 进 ， 互 联网 信息 产业 已 经 走 入 人 们 的 生活 。 在 这 样 一 个 
非 物 质 社 会 中 ， 手 机 软件 这 些 非 物质 产品 再 也 不 像 过 去 那样 紧 紧 靠 技 术 束 能 处 于 不 败 之 地 。 工 
业 设 计 开 始 关 注 非 物质 产 品 ， 但 是 在 国内 依然 普 授 仔 在 这 样 一 个 称呼 “美工 ”。 这 种 旧式 的 称 
呼 倒 无 关 紧 要 ， 关 键 在 于 企业 和 个 人 之 间 都 要 清楚 这 个 职位 的 重要 人 作用， 如果 还 以 “ 老 眼 光 ” 
来 对 竺 这 份 工作 ， 则 会 产生 很 多 消极 的 因素 ， 一 方面 在 于 称呼 职员 为 美工 的 企业 没有 意识 到 界 
面 与 交互 设计 能 给 他 们 之 来 巨大 的 经 济 效益 ; 另 一 方面 在 于 被 称 为 美工 的 人 不 知道 目 己 应 该 做 
什么 ， 以 为 自己 的 工作 就 是 每 天 给 界面 与 网 站 义 边 描 图 。 

TT EA SN NS A a Te fe ts ET bse la I fw a i 
ra) a eee i] oa de eh I a A ms tN A dh IR ed 

UI 是 User Interface 的 简称 ， 即 用 户 界 面 。 它 包括 交互 设计 、 用 户 研 究 和 界面 设计 三 个 音 
分 。 这 里 主要 讲述 用 户 研究 与 界面 设计 的 过 程 。 

一 个 通用 消费 闫 软 件 界面 的 设计 大 体 可 分 为 以 下 5 个 步骤 。 

(1) 需求 阶段 。 

QD oh we vt lS 

(3) 调研 验证 阶段 。 

(MD 7 7 En 

Oe le se oa 


3.1.1 需求 阶段 


软件 产品 依然 属于 工业 产品 的 范畴 ， 依 然 离 不 开 3W 的 考虑 (Who, Where, Why) ， 也 就 是 使 用 
TE A RH re eh AE a i ze ER NH AN 
\ 用 户 的 年 龄 、 性 别 、 爱 好 、 收 入 、 教 育 程度 等 ) ， 什 么 地 方 用 《在 办 公 室 /和 家庭 /上 房车 间 / 公 共 
场所 ) ， 如 何 用 《鼠标 /键盘 /遥控 器 /触摸 屏 ) 。 上 面 的 任何 一 个 元 素 改 变 ， 结 果 都 会 有 相应 的 
改变 。 

除 此 之 外 ， 在 需求 阶段 同类 苋 搜 产品 也 是 必须 了 解 的 。 同 类 产品 比 我 们 提前 问世 ， 我 们 要 
比 它 做 得 更 好 才 有 存在 的 价值 。 那 么 单纯 地 从 界面 美学 券 处 说 哪个 好 ， 哪 个 不 好 是 没有 一 个 很 
答 观 的 评价 标准 的 。 只 能 说 哪个 更 合适 ,时 适 于 最 终 用 户 的 束 古 最 好 的 。 如 何 判定 是 僻 适 于 用 
户 呢 ?后 面 通过 用 户 调研 来 解答 这 个 问题 。 


ml 
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通过 分 析 上 和 面 的 需求 ， 下 和 耐 进入 设计 阶段 ， 也 就 古方 案 形 成 阶段 ， 一 般 需 要 设计 出 儿 套 不 
同 风格 的 界面 用 于 备 选 。 首 先 应 该 制作 一 个 体现 用 户 定 位 的 词语 坐标 ， 例 如 为 25 岁 左右 的 日 令 
男性 制作 家 大 娱乐 软件 ， 对 于 这 类 用户 分 析 得 到 的 词汇 有 : 品质 、 精 天 、 高 峭 、 高 雅 、 田 性 、 
Fo jg eolo LY Oh 2 a A eA 4 a ER 滞 二 要 纪 傅 纲 的 加 偶 
如 : 品质 、 精 闫 、 局 档 、 时 尚 。 但 有 些 词 是 相互 矛盾 的 ， 必 须 放弃 一 些 ,例如 : 杀 和 、 放 松 、 
cool、 个 性 每 。 所 以 可 以 夯 出 一 个 坐标 ， 上 和 面 是 必须 用 的 品质 、 精 类、 电 档 、 时 尚 。 左 边 是 贴 
WE HA 3 op :| RS A ES AA re fo 9 wae eo oA EN ln 
业 化 。 然 后 开始 搜 案 相 呼 应 的 图 片 ， 放 在 坐标 的 不 同 点 上 。 这 样 根 据 不 同 坐 标点 的 风格 ， 我 们 
将 会 设计 出 数 套 不同 风格 的 界面 。 


3.1.3 调研 验证 阶段 


几 套 备 选 方案 的 风格 必须 保证 在 同等 的 设计 制作 水 平 上 ， 不 能 明显 看 出 兰 弄 ， 这 样 才 能 得 
到 用 户 客观 的 反馈。 

测试 阶段 开始 前 ， 我 们 应 该 对 测试 的 其 体 细 市 进行 清楚 的 分 析 搬 述 ， 如 下 所 述 。 

数据 收集 方式 : 厅 答 测试 /模拟 家 大 /办 公 室 。 

测试 时 间 : 菏 年 东 月 未 日。 

i 式 

测试 对 象 : 汞 消费 软 件 界 定 市 场 用 户 。 

主要 特征 : 对 计算 机 的 使 件 配置 以 及 相关 的 性 能 指标 比较 了 解 ， 计 算 机 应 用 水 平 较 


高 ;计算 机 使 用 经 历 一 年 以 上 ; 家 许 购 买 计算 机 时 品牌 和 机 型 的 主要 决策 者 ; 年龄 为 X 一 X 
7 3 CE 7 A hi eT eR A 9 DR A AN A Ti DA Me a sR RE AN 
Dn 


样品 : 五 套 软件 界面 。 

样本 量 : X 人 小， 实际 完成 X 个 。 

调研 阶段 需要 从 以 下 几 个 问题 出 发 。 

用 户 对 各 套 方案 的 第 一 印象 。 

用 户 对 各 套 方 守 的 综合 印象 。 

用 户 对 各 套 方 案 的 单独 评价 。 

选 出 最 辟 欢 的 。 

选 出 其 次 喜欢 的 。 

对 各 方案 的 色彩 、 文 学 、 图 形 等 分 别 打 分 。 
结论 出 来 以 后 ， 请 所 有 用 户 资 出 最 受 欢 迎 方案 的 优 、 缺 点 。 
所 有 这 些 都 需要 用 疼 形 表达 出 来 ， 百 观 科 学 。 


Diol! 
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3.1.4 方案 改进 阶段 


经 过 用 户 调研 ， 可 以 得 到 目标 用 户 最 喜欢 的 方案 ， 而 且 了 解 到 用 户 为 什么 收 欢 ， 还 有 什么 
缺陷 等 ， 这 样 殉 可 以 进行 下 一 步 修改 了 。 这 时 候 可 以 把 精力 投入 到 选中 方案 上 《这 里 指 不 能 换 
皮肤 的 应 用 软件 或 洲 戏 的 界面 ) ， 将 该 方案 做 到 细致 、 精 天 。 


3.1.5 有 用户 验证 反馈 阶段 


改正 以 后 的 方案 ， 我 们 可 以 将 它 推 癌 市 场 。 但 是 设计 并 没有 线束 ， 还 需要 用 户 反 饿 。 好 的 
设计 师 应 该 在 产品 上 市 以 后 去 站 柜台 ， 和 零 距 离 接触 最 终 用 户 ， 看 看 用 户 真 正 使 用 时 的 感想 ， 为 
以 后 的 升级 厂 本 积 素 资料 。 

经 过 上 面 设计 过 程 的 描述 ， 大 家 可 以 清楚 发 现 ， 界 面 UI 设 计 关 似 于 一 个 非常 科学 的 推导 公 
却 ， 它 有 设计 师 对 艺术 的 理解 感悟 ， 但 绝对 不 仅仅 是 表现 设计 师 个 人 的 绘画 水 平 。 所 以 我 们 一 
再 强调 ， 这 个 工作 过 程 是 说 计 过 程 ，UI 界 面 设计 不 只 是 美工 。 


Username: 
i ed 


Password: 


| REmemberNMe 
| i 


WT kl 


Passvwword: 


Retype Password: 


E-mail Address: 


凤 回 迪 电 由 
VOYYE ee 
WY ODE 
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3.2 
图 标 设 计 的 流程 


俗话 说 流程 是 死 的 ， 人 是 活 的 ， 这 里 介绍 的 是 图 标的 通用 设计 流程 ， 大 家 不 一 定 要 拘泥 于 
这 里 讲 的 流程 ， 要 灵活 掌握 。 


找到 一 个 能 够 达到 与 图 标 产生 联 
/7 想 和 远 辑 关系 ， 甚 至 是 因果 关系 
寻找 隐喻 的 具象 物体 。 


平时 的 素材 积累 很 重要 ， 可 以 去 
一 些 素材 网 站 找 一 些 没 有 版 权限 


制 的 源 文件 进行 参考 。 用 铅笔 画 出 草图 ， 构 思 图 标的 造 


ul 型 。 笔 和 纸 可 以 在 构思 的 时 候 反 复 
搜集 素材 7 修改 有 手 健 板 更 方便 | 
yo 最 终 草 图 要 尽量 接近 成 品 。 
Ul 设计 师 收集 相关 资料 并 分 析 
目标 用 户 的 使 用 特征 、 情 感 、 
习惯 、 心 理 、 需 求 等 。 不 同 的 图 标 用 途 决 定 了 风格 取向 ， 
比如 : 
确定 风格 卡通 一 -轻松 
!| 
制作 阶 估 和 鬼 沁 二 工具 的 性 突出 质感 
要 能 达到 效果 就 好 ， 一 般 使 用 ee 
ym All 3DMax 等 软件 。 风格 跟 操 作 系 统 关系 比较 大 ， 要 先 
看 看 图 标尺 寸 要 求 。 


调整 细节 
制作 图 标 
对 于 细节 调整 ， 有 质感 、 阴 影 、 光 
zd i a 
针对 一 致 性 测试 ; 
由 界面 简洁 性 测试 ; 
界面 美观 度 测试 。 
检验 前 面 界面 设计 的 成 果 是 否 
符合 市 场 及 用 户 群体 。 
收集 市 场 对 于 产品 的 用 户 体验 ， 
并 记录 成 文字 说 明 。 


0 
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3.3 
如 何 让 图 标 更 具 吸 引力 


设计 图 标的 目的 在 于 能 够 一 下 抓 住人 们 的 视 沉 中心， 那么 该 怎样 设计 才能 让 图 标 更 上 其 吸引 
力 呢 ? 在 这 里 讲述 了 3 点 : 同一 组 图 标 风格 的 一 发 性 、 图 标 里 正确 的 透视 和 阴影 、 合 理 的 原创 
隐喻 。 

1. 同一 组 图 标 风 格 的 一 致 性 

儿 个 图 标 之 所 以 能 成 为 组， 网 是 因 
为 该 组 图 标的 风格 有 具有 一 玫 性 。 一 至 性 可 以 
通过 下 面 这 些 方 面 显 示 出 来 : 配色 、 透 视 、 
尺寸 、 绘 制 技 巧 ， 或 者 类 似 几 个 这 样 属性 的 
和 组合。 邮 末 组 由 只 有 少量 的 儿 个 图 杯 , 俊 
计 师 可 以 很 容易 地 记 住 这 些 规 则 。 如 来 一 组 
里 有 很 多 图 标 ， 而 且 由 几 个 设计 师 同 时 工作 
(例如 个 操作 系统 的 图 标 ) i 那 么 省 就 


需要 特别 的 该 计 规 范 。 这 些 规 范 细 致 地 摘 述 二 jd Musi 
了 怎样 绘制 图 标 能 够 让 其 很 好 地 融入 整个 图 四 


标 组 。 


2. 合适 的 原创 隐喻 

绘制 一 个 图 标 意味 看 揪 绘 一 个 物体 最 具 代 表 性 的 符 操 ， 这 样 它 就 可 以 说 明 这 个 图 标的 功 
能 ， 或 者 阐述 这 个 图 标的 概念 。 

te te A Th SI 

(1) 多 边 形 柱 体 ， 表 面 涂 有 一 层 有 反光 浔 ， 没 有 橡皮 擦 。 

(2) 多 边 形 柱 体 ,| 笔 对 二 有 | 个 日 色 的 侈 属 圈 固定 大 介 剧 庶 头 ， 

(3) 多 边 形 柱 体 ， 没 有 木 纹 效 玉 和 橡皮 擦 。 

在 这 里 选择 第 二 种 作为 图 标 设计 的 原型 ， 因 为 该 原型 具备 所 有 必要 的 元 素 ， 这 样 的 图 标 设 
计 出 来 共有 很 蜗 的 可 识别 性 ， 即 上 共有 合适 的 原创 隐喻 。 


LAA 


dail 


本 章 主 要 讲解 关于 Photoshop CC 的 一 些 基 础 知识 ， 通 过 对 本 
章 内 容 的 学 习 ， 可 以 使 读者 在 学 习 过 程 中 ， 打 好 APP UI 设计 的 
技术 基础 。 


认识 Photoshop CC 
Photoshop CC 和 春 面 
利用 矢量 工具 绘制 形状 
制作 图 标 

图 三 格 式 


及 QR Rn ER 
TO aas 
TI 
=: ‘%* > Ws | | ED 


NU OC-+mxaveoe. 2 四国 | 
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4.1 
初 识 Photoshop CC 


在 计算 机 的 艺术 天 地 中 没有 什么 软件 比 Photoshop 使 用 得 更 广泛 ， 不 管 是 广告 创意 、 平 面 构 
成 、 三 维 效 果 还 是 后 期 处 理 ， 该 软件 都 是 最 佳 的 选择 。 尤 其 是 在 印刷 品 的 图 像 处 理 上 ，Photoshop 
更 是 无 可 替代 的 专业 软件 。 在 本 节 中 ， 我 们 主要 介绍 一 下 Photoshop CC 的 大 致 应 用 领域 。 

Photoshop 带 给 摄影 师 、 画 家 以 及 广大 的 设计 人 员 许 多 实用 的 功能 ， 就 像 我 们 用 五 颜 六 色 的 
毛笔 在 图 纸 上 绘 出 美妙 的 图 画 一 样 ，Photoshop 工 具 也 是 将 我 们 的 想法 以 图 像 的 形式 表现 出 来 。 
Photoshop 从 修复 数码 照片 到 制作 出 精美 的 图 片 ， 从 工作 中 简单 的 图 案 设 计 到 专业 印刷 设计 师 或 
网 页 设计 师 的 图 片 处 理工 作 ， 无 所 不 及 ， 无 所 不 能 。 

我 们 可 以 在 Photoshop 中 ， 将 一 张 数 码 照片 根据 需要 处 理 成 不 同 风格 的 图 像 ， 方 便 、 快 捷 地 
完成 一 些 艺 术 效果 ， 给 生活 添加 许多 风采 。 


4.2 
Photoshop CC 的 界面 


运行 Photoshop CC 以 后 ， 可 以 看 到 用 来 进行 图 形 处 理 的 各 种 工具 、 沫 单 以 及 面板 的 默认 操 
作 界 面 。 在 本 节 中 将 学 习 Photoshop CC 的 所 有 构成 要 素 及 工具 、 菜 单 和 面板 。 


4.2.1 Photoshop CC 的 工作 界面 


Photoshop CC 的 工作 界面 主要 由 工具 箱 、 表 时 柱 、 和 面板 和 编辑 区 等 组 成 。 如 果 我 们 熟练 掌握 
各 组 成 部 分 的 基本 名 称 和 功能 ， 束 可 以 上 自如 地 对 图 形 图 像 进 行 操 作 。 


I Ps 文件 (日 ”编辑 (日 图 像 (D 图 层 (D 文字 (WW) 选择 (5) 滤 樟 (了 ”视图 (VW) 窗口 (W) 帮助 (H) 
*| | 中 显示 变换 控件 | 本 如 有 | 
1-2-1.jpg @ 95%(RGB/8) x 


了 
中 


r=- | | 
sl 
-2 | 

四 上 四 


ROY 
> 


如 也 门 尽 


嘿 到 
NE 


有 加 


DI 
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DNB (2) 选项 栏 

可 以 快速 切换 到 所 需 的 工作 区 操作 界 租 记 昭和 仿生 辣 归 区 圳 年 虽 基 箱 遇 历 三 下 属 
和 面 ,| 如 “基本 功 肥 设计 i 全 纵 男 呈报 站 的 克 项 ,根据 所 迹 亚 上 其 的 不 同 ， 历 担 供 的 选项 
影 ” 等 。 栏 也 有 所 区 别 。 


a 寿 国有 编辑 (E) 图 像 (D 图 层 (L) 文字 (Y) 选择 (5) ” 滤 镜 (了 视图 (V) 窗 
新 建 加 . . Ctrl+H Ee Vi - ; 人 :| 不 委 明 度 : [39% | - | E29 | 流量: [100%| -| 区 | 区 
| 打开 (0)... te 如 有 全 哩 可 | 豆 | ”EE 9 EE 
在 Bridge 中 浏览 8)... MttCtrlt0 | 友 小 : 55 卉 素 
在 有 ini Bridge 中 浏览 (6)... | 
打开 为 ... MLttShifttCtrl+0 回 
打开 当 智 能 对 象 ... 硬度 : 0% 
最 近 打 开交 件 (T) Wf 1 1-2-1.jpg | | 
- 2 1236003343_DSC2947. jpg 

关闭 人 C) Ctrl | 3 px (370). jpg | 
关闭 全 部 和 ttCtrl4 甸 和 E 
关闭 并 转 到 Bridege... Shi ft+CtrlH 几 = | El[ ' 呈 ' 二 
存储 为 (A)... Shi ft+Ctrl+S es ne ssl] eal hed nd ee 

8 0019. png 了 
存储 为 Web 所 用 格式 . 向 t+Shift+Ctrl+S 9 0033 pnzg By | | 

10 index.psd | | 5 |s| 上 
置信 上 清除 最 近 的 立 件 列表 
AAs 7 D3 
(3) 工具 箱 (4) 图 像 窗 口 

包 Photoshop GOmenr | 用 于 显示 Photoshop CC 中 操作 的 图 像 


应 图 标 即 可 选择 该 工具 。 右 击 或 按 住 右 下 和 角 帝 mi 
有 小 三 角 的 工具 图 标 即 可 打开 隐藏 的 工具 组 。 -一 一 


1 4 

,i 

苹 人 下 x 吸管 工具 I 
*# 郊 颜色 职 样 器 工具 1 

79， | 5 标尺 工具 

二 笃 | 国 注 笠 I 具 1 


(5) 状态 位 (6) 图 像 窗口 
位 于 图 像 窗 口 下 端 ， 用 于 显示 当前 图 像 的 在 用 户 使 用 Photoshop CC 的 各 项 功能 时 ， 
文件 大 小 、 显 示 比 例 以 及 图 片 的 各 种 信息 说 明 ”以 面板 的 形式 提供 。 


At 人 自 
1 同 v GENo 


hdobe Drivwe 
w 全 档 坟 小 
立 档 配 壮 女 件 


玄 档 民 十 

暂 存 盘 大 小 

效率 

计时 

当前 工具 

32 位 曝光 
立 档 :1.89Mj1.89M 存 情 ] 坦 度 


Le 
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4. 2. 2 Photoshop CC 的 工具 箱 


启动 Photoshop 后 ， 工 具 箱 会 默认 显示 在 屏幕 左 侧 。 工 具 箱 中 列 出 了 Photoshop CC 中 的 常用 工 
具 ， 通 过 这 些 工 具 ， 可 以 输入 文字 ， 选 择 、 绘 制 、 编 辑 、 和 移动、 注释 和 簿 看 图 像 ， 或 者 对 图 像 进 
A ER el I DA SE Fl EA EE A a eR A rh sa a eT A A TN 
还 可 以 查看 它们 的 隐藏 工具 。 将 鼠标 指针 放 在 工具 图 标 上 ， 将 出 现 工 具名 称 和 快捷 键 的 提示 。 


4 其 


ET 具 0D 家 ee 动工 > 
IR 0) el TD 
TR CO 加 中 入 工具 (DD) 
Br AD 
msTAGS EL ,历史 记录 面 笔 (7 
TR CD | Fe 


Cooooosoooooooooosooooosooseososoossoso 2 Ee 芽 | 文字 工 } ee 中 YY 
路 径 选 择 工 上 CAY RR 四 ee ones 
折 于 工具 (2) 各 I 缩放 工具 (Z) 


;矩形 选 框 工具 M 
。 让) 燃 回 选 框 工具 M 
单 击 工具 箱 中 的 一 --- 单行 选 杠 工 具 
上 Wh 〗 单列 尘 框 工具 
个 工具 图 标 即 可 选择 该 工 人 套 素 工具 L 


| Wl 。 别 多 边 形 套 素 工具 上 。 ,多 吸管 工具 I 
具 。 碳 下 角 带 有 三 角形 的 。 证 才 驶 IT 具 Cc  。 耻 磺 性 套 素 T 具 | 3 颜色 取样 器 T 具 1 
并 透视 未 芍 工具 Cc -一 一 
va 下 一 “也 DAS 多 切片 工具 i 污点 修复 画笔 工具 
| lal 标 表 明 i240 Wm 名 < 切片 选择 工具 2 i . A 铅笔 工具 B 
uu lL 和 堆 修补 工具 ] 拉 / 颜色 蔡 换 工具 B 
: \、 ，。 ?9 内 容 感知 移动 工具 混合 器 画笔 工具 

有 [ 幼 藏 ul ? 在 这 样 的 川中 站 中 仿制 图 章 工 具 5 人 | ; > a 2 历史 记录 画笔 工具 Y 


有 具 图 标 上 按 住 鼠标 左 键 即 福 图 案 图 章 I 具 Ss 。 放 查 皮 控 工 具 E | 。 肝 渐变 IT 具 6 历史 记录 艺术 画笔 了 具 Y 
及 油 束 桶 I 具 6 -rr 


3 背 具 橡皮 擦 工具 上 | 


| :区 魔术 橡皮 擦 工具 E | 
可 显示 隐 蔚 的 工具 。 De 
" 钢笔 IT 具 PF 工 覃 拓 文 字 I 具 。 T 国 海绵 工具 0 
: 。 八 锐 化 工具 ” 旋 
让 六 自 由 钢笔 工具 P a ! 芽 直 排 文字 I 具 ” T 
十 人 添加 错 点 工具 纪 涂抹 工具 :oe 
2 添加 错 点 38 机 排 交 字 莹 版 工具 T " 辐 矩形 工具 U 
一 仿 册 除 错 点 工具 。 从 路 径 选 择 工具 A /党 址 排 文 字 误 版 了 具 T 国 园 角 矩形 工具 U 
入 转换 点 工具 内 直接 选择 工具 A @ 悄 加 工具 U 
Sa 本 
。, 陀 旋转 视图 工具 R 大 自 定 形状 I 具 U 


工具 箱 中 隐藏 的 工具 组 
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当 有 人 问 到 ， 如 何 才 能 快速 上 手 制作 图 标 呢 ? 我 的 回答 是 : 临摹 。 无 论 是 纯粹 的 艺术 修炼 还 
征 设计 学 习 ， 临 大 都 是 必须 要 经 过 的 阶段 。 也 许 有 人 会 说 ， 临 莫 呆 ! 不 就 是 找 张 作 品 然后 对 看 画 
出 一 样 的 束 行 了 ， 这 有 谁 不 会 呢 ? 

可 是 ， 有 些 新 人 并 不 知道 如 何 有 效 进 行 临摹 。 首 先 ， 目 然 是 寻找 参照 物 。 值 得 注意 的 是 ， 要 
参照 的 作品 必须 有 一 定 的 质量 ， 否 则 不 仅 当 费 时 间 而 且 影响 个 人 的 审美 。 其 次 ， 参 照 作品 应 符合 
当前 个 人 的 水 平 ， 特 别 是 对 于 新 人 来 说 不 应 该 一 开始 束 找 较 蜗 难度 的 作品 ， 这 样 容易 人 遭受 挫折 ， 
丧失 学 习 的 激情 。 应 该 从 傈 单 的 开始 循序 渐进 ， 慢 慢 建 立 和 目 信 ， 逐 渐 提 高 难度 。 

临 斧 图 标 需 要 的 方法 如 下 。 

(1) 建议 用 PS 直接 打开 需要 临 草 的 图 片 ， 在 图 片上 痢 建 图 层 临 莫 。 这 样 容 易 对 比 观 察 ， 能 很 
直接 地 判断 图标 各 个 元 又 之 间 的 比例 关系 。 如 果 参 竹 作 品 太 小 ， 不 得 不 用 两 个 男 布 时 ， 也 要 务必 
保证 狐 画 布 大 小 、 图 标 比 例 与 原作 一 致 。 

NE a aE a 2 RA 
的 新 窗口 。 将 此 窗口 拉 到 合适 比例 ， 并 保持 100% 可 视 状 态 。 这 样 在 绘制 图 标 细 市 时 ， 无 论 放 大 多 
少 ， 进 行 任何 操作 ， 新 窗口 都 会 同步 。 如 此 ， 大 大 减少 了 100% 状 态 与 放大 状态 来 回 切 换 的 时 间 。 


图 层 () 文字 ( 鸭 选择 (6) 小 并 (TD) 视图 WD 窗口 (W) 帮助 人 H) -|m| x 
下 居间 到 | 吾 蔚 至 中 


(2) 像素 是 否 对 齐 ， 是 否 无 锯齿 。 如 果 不 对 齐 像素 ， 边 缘 会 出 现 虚 边 。 当 选择 窃 形 工具 或 圆 
角 和 矩形 工具 等 时 ， 要 在 选项 栏 中 多 选 “ 对 齐 像素 ”选项 ， 这 样 在 绘制 时 ， 会 自动 对 齐 。 但 在 之 后 
又 进行 了 放大 、 缩 小 或 移动 后 还 是 有 可 能 会 产生 虚 边 ， 要 注意 随时 调整 。 


i 国 “|| 天 3]| 车 守 :| 国 阳 措 边 :| 点 |] [一 9 H: B04 杞 | | 目 屁 二 | 头 半径 : [0 异 齐 [Vi 对 和 过 红 
临摹 图 标注 意 事项 如 下 。 
(1) 集中 精力 。 


(2) 不 要 有 惰性 ， 细 节 决 定好 坏 ， 不 能 偷懒 省 略 步 又 细 放 。 

(3) 临 莫 的 目的 是 提高 技术 水 平 ， 临 而 的 同时 要 罕 搬 技法 教程 学 习 。 

(4) 临 侈 的 同时 要 锻炼 眼力 ， 最 终 目 的 要 能 观察 到 1 像素 级 别 的 细微 差 弄 。 
(5) 直接 临 拿 的 同时 ， 和 罕 插 一 定 程度 的 源 文件 临 斧 。 


1 人 
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4.4 
图 标 制作 流程 


通过 前 面 的 学习 ， 已 经 掌握 了 Photoshop 软 件 的 基本 操作 ， 以 及 图 标 制作 的 原则 和 技巧 ， 下 耐 
具体 设计 一 组 图 标 。 


4.4.1 打开 Photoshop 软 件 


在 制作 图 标 之 前 ， 需 要 做 好 准备 工作 。 打 开 Photoshop 软 件 ， 执 行 “ 新 建 ” 人 命令， 新 建 一 个 
50cmX50cm、300 像 素 的 文档 。 


严 件 民 | 编辑 (E) 图 像 (四 图 层 (L) 文字 人 Ps 文件 E) 编辑 E) 图 像 中 图 层 (文字 人 Y) 选择 6) 波 樟 (T) 视图 人 y) 窗口 (NW) 帮助 (d) 四 mm 
新 建 0 . Ctrlt] ys | 加 [| aa | 机 各 区 昌 呈 | 专 羡 羡 中 机 时 | 对 En 
打开 07... Ctrl+0 二 | 未 标题 -1 @ 12.5%(CMYK/8*) * x 

国 


在 Bridge 中 训 览 外)... MttCtrl+0 
Wn 在 ini Bridge 中 浏览 (6)... 
打开 汶 ... 


Mttshift+Ctrl+0 


打开 为 智能 对 象 .. . 
最 近 打开 文件 上) 


关闭 人 C) Ctr]++ 甸 
关闭 全 部 记 t+Ctrl1H 由 
关闭 并 转 到 | Bridge. . . Shiftt+Ctrl+t 甸 
存储 (5) Ctrl+S 
存 铺 涛 心 ).. . Shi ft+Ctrl+S 


存储 汶 Yeb 所 用 格式 ... ALttShifttCtrl+s 


置 入 (0)... 


导入 吊 ) 
导出 多) 


自动 0 
脚本 (RE) 


站 件 简介 (F)... Alt+Shift+Ctrl+I 


打 EN (F)... Ctrl+F 
打印 一 份 (Y) ALtt+Shift+Ctrl+P 


退出 名) 


久 日 [ 国 % P73SIDEINANPA 和 NL 


族 
9 
2 
其 , 
<- 
下 
芭 . 
2 . 
匡 ] 
y. 
全 


Ctrl1+ 


SN 


9 OO. 向 同人 佛 


4. 4. 2 设计 阶段 


现在 可 以 抛 开 计算 机 ， 财 上 眼睛 思考 ， 在 脑子 里 形成 一 个 构思 。 确 定 想 法 后 ， 就 开始 动手 给 
画 ， 用 笔 快速 将 创意 呈现 在 纸 上 ， 先 大 致 男 一 部 分 有 代表 性 的 草图 示例 ， 避 免 灵 感 去 失 。 


构思 
提炼 关键 字 


原则 


缺失 灵感 怎么 办 ? 参考 类 似 作品 一 [a fi 人 灌 


[8 
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早 图 
画 出 代表 性 的 示例 


oOo— 
—O- 
0- 一 


~ 
A 
ol 


SN 


区 
oi 
时 


1 I 
人 四 二 


o 一 -一 0 
| | 
f |) 
o 
3 


加 


2 Bn Fa 


口 昌 日 


绘制 图 标 限制 ， 统 一 视觉 
大 小 。 使 用 矩形 选 框 工具 ， 绘 制 
Se mo Sem Ny rae Rv 
后 填充 灰色 ， 按 住 <《A1t》 键 移动 
De A a 
个 副本 ，| 而 在 垂直 方向 ， 可 将 第 
由 
“Alt> 键 进行 移动 并 复制 ， 复 制 3 
内 吕 属 党 售 钟 三 轩 视 由 a 
Oe ly 

pT a Ro Re GD 
正方 形 填 元 较 淡 的 闫 色 。 

绘制 完成 后 ， 新 建 组 ， 将 其 
拖 入 到 组 1 中 ， 进 行 锁 定 。 


图 层 
[Pp 关 | 国 @TO 明 四 

字 透 *| 不 透明 度 : - 

定 : 田 of 中 国境 充 : 

®®) 委 组 1 a 


思 形 届 | 


所 .加 @. 各 回首 上 


,mel 
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4. 4.4 ”观察 效果 


在 辅助 背景 上 绘制 基本 形 ， 将 其 放大 ， 可 以 观察 到 像 友 后。 


基本 
灰色 背景 辅助 的 定 界 框 ， 


此 处 说 是 为 钊 用 的 16 久 16px。 
用 眼睛 衡量 ， 注 意 视 觉 均 衡 ， 
eu 


会 显得 俩 大 。 


Kd 


用 大 


按 下 快捷 键 《Ctrl++>， 将 画布 放大 到 600%， 
注意 调 市 不 要 太 猛 ， 这 样 束 可 以 看 到 像素 点 和 网 
格 粗 线 了 。 


消除 锯 次 通 第 是 为 了 清晰 ， 而 不 十 锐利 ， 不 
要 为 了 消除 而 消除 ， 需 要 你 留 一 些 杂 边 ， 图 标 才 
能 平 清 。 国光 


4.4.5 制作 过 程 


一 切 准备 驶 绪 ， 现 在 驶 开始 创作 吧 ! 好 多 人 在 创作 的 时 候 ， 男 完 一 个 吏 缺 少 灵 感 了 ， 那 陨 试 
Wo ly 


哩 用 方法 
加 减法 对 称 
曙 黎 
.OO 
EE EE 
EE 
旋转 微调 整 


I30! 
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基本 形 的 演变 


四 自 日 昌 
着 加 生日 芝 旱 
四 跨国 口 咽 时 
:0 各 口 是 


OOOOOU 
OVOOOOU 
VOOOON 
OOYVOOO 


2 
De 


规则 矩形 的 演 


2 
人 


圆 的 演 


人 
量 09 Na 
| Ew 且 : 


Be AD 


be 
已 四 加 局 
长 办 加 和 
2S2 人 6 相 昌 


不 规则 其 他 形状 


不 规则 驯 用 形状 
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4 | 川 册 中 (入 用 


创作 图 标的 时 候 ， 最 闸 使 用 的 方法 束 是 变形 ， 可 以 将 其 他 基本 形状 进行 组 合 ， 目 由 发 挥 ， 这 
循 “整体 到 局 部 ”的 原则 ， 先 造型 再 修饰 细节 。 


形状 组 合 


椭圆 和 长 方形 组 合 形 ” 三 角形 和 长 方形 组 合 圆 形 和 长 方形 组 合 形 ” 圆 角 窍 形 和 圆 形 组 合 
成 入 头 形状 。 形成 房屋 形状 。 成 电话 形状 。 形成 设 营 图 标 。 


全 
局 


全 


Sc 


圆 形 和 长 方形 组 合 形 。” 圆 形 和 长 方形 组 合 形 ”椭圆 和 圆 角 年 形 组 合 三 角形 和 五 边 形 组 合 
成 日 云 形 状 。 成 照相 机 形状 。 形成 锁 的 形状 。 形成 五 角 必 形状。 


da! 


Photoshop APP UI 设计 从 入 门 到 精通 
4. 4. 7 ”最 终 展示 


为 图 标 加 上 背景 ， 完 成 设计 。 


证 下 分 De 上 全 
人 六 妇 站 9@ 个 
DOOOOOVOVE 
OOOOOOOQAG 
OO@O00OG 半 六 
岂 国 上 四国 目 国 回避 
中 国 [ 殉 区 辐 加 加 加 
口 围巾 加 加 国 枚 
PG 
Es | 


4.5 
实用 工具 和 资源 
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这 里 提供 了 一 坚 论坛 和 网 上 下 载 资 源 的 介绍 ， 痢 是 笔 着 钊 去 的 网 站 。 还 介绍 了 儿 种 好 用 的 UI 


设计 工具 ， 绝 对 让 设计 者 事半功倍 ， 大 家 可 以 试 试 。 
网 上 资产 


4.5.1 


四 


htteo: apponeneom 


DID 
pO saa 
的 网 站 ， 提 供 作 品 在 线 服 务 ， 供 
网 友 在 线 查 看 已 经 完成 的 作品 ， 


或 者 正在 创作 的 作品 。Dribbble 
还 种 剖 各 机 推出 咱 相 应 的 软件 ， 
可 以 通过 苹 末 应 用 商店 下 载 使 用 
很 多 移动 应 用 。 


ht to ww cool eom en 

站 酪 网 肾 集 了 中 国 绝 大 部 分 的 专业 
设计 师 、 艺 术 院 校 师 生 、 淹 流 艺 术 
家 等 年 轻 创 意 人 群 ， 是 国内 最 活跃 
的 原创 设计 交流 平台 。 该 网 站 涉及 
交互 设计 、 影 视 动 漫 、 时 尚文 化 等 
诸多 创意 产业 。 


COC 


ht top: /ede, meneenatcom/ 


腾讯 CDC 致力 于 做 世界 一 流 的 互联 
网 设计 团队 ,为 用 户 创造 优质 在 线 
生活 体验 。CDC 关注 于 互联 网 视觉 
be wh oo we wd NU rh SN 
开发 。 在 这 个 网 站 可 以 找到 腾讯 设 
计 师 们 诸多 设计 帖子 。 


Mf fons 


http://wwwiconfans. com/ 
Iconfans 专业 界面 交互 设计 论坛 ， 
2 a a 
看 “小 圈子, 大 份量 ”的 原创 理念 ， 
服务 于 所 有 爱好 设计 交互 人 群 的 


A fe Ve a | Rm 


和 分 至 为 核心 ， 为 设计 师 朋 友 的 
工作 与 学 习 提 供 更 多 创作 灵感 和 
参考 资料 。 


ho tp wali ud en 

a a a es, th EI ae i 
年 ， 全 称 是 用 户 体 验 设计 部 ， 兹 名 
Was BB) hs 
深 的 部 门 之 一 。 你 可 以 在 这 里 阅读 
设计 师 们 的 文章 。 


ta 
本 上 
http://www. uisde. com/ 
优秀 网 页 设计 联盟 ,SDC (Superior 
Design Consortium) 是 有 着 专业 
设计 师 交 流 氛 围 的 设计 联盟 。 坚 持 
设计 师 及 设计 爱好 者 提供 免费 的 区 
流 互动 平 合 。 


机 RN 


http://www. uimaker. com/ 

Uimaker 是 为 UI 设计 师 提供 UI 设 
计 资 源 学 习 分 吾 的 专业 平台 ， 拥 有 
UI 教程 、UI 素材 、ICON、 图 标 设计 、 
手机 UI、UI 设计 师 招聘 、 软 件 界 
面 设计 、 后 全 界面、 后 从 模 板 等 相 
容 。 在 这 里 你 可 以 找到 很 多 设 


hp /Am a eom/ 

百度 无 线 用 户 体验 部 ， 是 百度 移动 
云 事 业 部 下 的 用 尸体 验 团 队 。 负 责 
回民 填 且 狼 要 刚 图 民风 面 帮 汪 侈 呈 | 
op A 
百度 手机 助手 等 。 在 这 里 可 以 找到 
百度 设计 师 们 的 很 多 设计 文章 。 


http://www. iguoguo. net/ 


爱 果 果 (iguoguo) 是 一 个 专门 从 
事 酷站 收藏 、 酷 站 欣赏 、 网 页 设计 
推荐 、UI 推荐 的 网 站 。 还 提供 优 
秀 UI 素材 下 载 的 网 页 设计 分 享 ， 
设计 师 的 酷站 收藏 、 酷 站 欣赏 、UI 
设计 家 园 等 功能 。 
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EC EC ee SC aceaet ae ec ae ks ks SC c c es cc ae se ce ka Sec Ce ea ea SeckCce ee tesasasakckaesaksSCSckck ke ace eckckaek ck ks SC ca ceaeccea ac crackscacsacscsckckscscsckckckc gc cacka csskckckck ck ckackckckc cc cs ck ck kk ee ce cc cccsc ts ce ce ee cc SC Cesesacekceaekasacses kkckck cc ck es sk ae 


化 办 


nuaban Corni 


http://www. huaban. com/ 

用 户 可 以 将 网 上 看 见 的 一 切 信 息 
都 保存 下 来 , 上 手 简单 , 玩味 无 限 。 
通过 专属 于 “ 论 准 网 ”的 浏览 此 
和 
完成 信息 的 收集 。 


堆 粮 


http://www. duitang. com/ 
堆 糖 网 是 一 个 全 新 社区 ， 主 题 是 收 


APPaI 


= mobile designm = 


hit bol /ap mo i 


PE Ve LR A se ah 


集 喜 爱 的 事物 ， 以 图 片 的 方式 来 展 


示 和 浏览 。 堆 糖 提 供 起 快捷 的 图 文 


收集 工具 ， 一 键 收 集 分 享 兴趣 ， 还 
有 各 种 兴趣 主题 小 组 。 


享 网 站 ， 它 聚集 了 国内 外 众多 的 
App UI 设计 师 , 是 国内 最 活跃 的 
App 原创 设计 交流 平台 。 


© FREE Download 


httpoiy /neenedfalesynet 


免费 素材 下 载 网 是 一 个 提供 多 种 
Re ey a SD I a 


了 PSDgraphics 


httor//wiwipsderaphies,com/ 
该 网 站 分 类 提供 了 很 多 PSD 源 文 
Me EA AR a PY A Te li 


PSDblast 


he ep/ psd last eom 
该 网 站 罗列 了 大 量 的 App UI 素材 
和 PSD 源 文件 提供 免费 下 载 ， 供 网 


费 模版 、 背 景 、 插 图 、 矢 量 图 等 。 ” 师 的 作品 交流 园地 。 友 们 欣赏 、 学 习 和 交流 。 
Android 系统 


The quick 


The quick 
The quick 


The quick 2. 


到 


roidSans-Bold. ttf 


The quick 


The SUaE LE 


DroidSans. ttf 


oidSerif-BoldItali 
ext 


ABCDEFGH 


各 


本 01234>ABCDEF 


Windows Phone 系统 


SegoeWP 本 


一 


STHeiti-Lieht. tte 


一 012345ABCDEF ”9 


LockClock. ttf 


本 
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4.5.2 原型 设计 辅助 工具 


UI stencil kit 模 板 套件 对 于 UI 的 草图 设计 非常 有 帮助 ， 并 十 分 方便 ， 它 有 和 针对 iPhone、iPad 


和 Android 的 模板 ， 还 有 是 B 应 用 的 UI 设计 模板 。 除 此 以 外 ， 它 还 提供 专用 的 模板 笔 和 模板 纸 。 


QS 
"Op + 天 Se、\ $ ¢ > ~ as 


Bix va! -mn | PE Ci | 
BE Eo—— 
NU ': Oc-+ mxev oe. ENS en (OY .， 


用 POP APP 做 出 一 和 亚 产 品 原 型 只 需要 五 个 工具 : POP、ipPhone、 纸 、 笔 和 橡皮 抱 。 让 你 轻松 做 
出 可 在 iPhone 上 演示 的 应 用 原型 。 

画图 : 在 纸 上 夯 出 完整 构 涤 图 ， 最 常规 的 儿 个 页 面 、 按 钮 、 主 流程 跑 通 束 好 。 

拍照 :用 POP 担 下 这 些 章 图 ， 应 用 会 目 动 调整 完 度 和 对 比 度 使 其 清晰 可 见 ， 存 到 POP APP 内 。 

编辑 : 将 拍 下 的 照 族 按 你 理想 中 的 顺序 放置 ， 利 用 链接 点 描 芭 出 各 个 板块 之 间 的 逻辑 关系 ， 
单 击 “Play” 按 和 钮 束 可 以 演示 整个 应 用 了 。【〔《 网 址 : http://popapp. in/no-ie) 。 
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AppCooker 
App Cooker 不 仅 是 一 个 创建 原型 的 优秀 工具 ， 它 提供 的 许多 功能 还 可 以 帮助 用 户 将 程序 发 布 

到 App store 中 。 它 集成 了 Dropbox，Box. net 和 photo roll， 可 以 下 接 将 图 标 和 其 他 UI 资源 导入 到 

原型 设计 工具 中 。 用 户 可 以 利用 渐变 和 填充 等 功能 来 创建 简单 的 形状 ， 并 且 可 以 访问 几乎 所 有 荚 

果 默 认 提 供 的 UI 控件 。 如 果 你 不 准备 进行 更 深入 的 图 形 设计 ， 可 以 使 用 App Cooker 将 图 片 资 源 合 

理 地 放 在 一 起 ， 以 创建 一 个 粗糙 的 、 统 一 的 原型 。App Cooker 还 有 一 个 很 容易 使 用 的 动态 链接 功 

能 ， 通 过 该 功能 ， 可 以 把 各 种 画面 连接 起 来 。 
(Rx oh ht to: adeooker,com,) 


| 21:23 
1 Tpp Cooker a © 帮 E pg: < 了 o Home Screen 
ed Slart crealing Tipps Overview App ldea ioSMockup Appicons PricingTool Store Info 


tpp Cooker 


$19,% 


口 App Store 


Now wupporting 
Yu for images 
9 
Create with App Cooker > Watchthevideo Play with App Taster 
ES a 人 


Prototype with style. Share clickable mockup: 


Fluid UI 是 一 款 用 于 移动 开发 的 Web 原 型 设计 工具 ， 可 以 帮助 设计 师 高 效 地 完成 产品 原型 设 


Bh ol A A i Wa md Ow eu Mae a le A | a Oome Tl a a ol 
名 | (Chromel 拘 此 的 APP 世 本 线 使 用 9 采取 拖 砚 有 的 探 作 认 芭 , 个 击 要 程序 员 米 号 代 个 是 太 
外 ，Fluid UI 资 源 库 非常 丰富 ， 有 针对 i0S、Android 以 及 Windows 的 资源 。 如 果 觉 得 库存 资源 不 能 
满足 个 人 的 需求 ， 也 可 以 自行 添加 。 

CA) ye to A en el Mom ls 


App Prototypes 


Text content Re 
ee ,Sliellolh/ ollale ellelo elelel 
somsibuse ee. Ey um imani quo,zz0 


TYT 


PO O Save time & cut costs 


O Involve clients in the process 


a alwjsjlnjrjvyjul， O p 2 一 -一 
imgaag0aae AjsjojejsjajJJk TRYIT 中 
而 日 口 BDD 吕 口 后 
= UL 下 zlxjclvjlelNjw 

En 


S50ORORA 


This tool is great!l | m blown away by it's power, speed and ease of use | 


Roland Gropmair (Founder af mApPs) 


Lhe 
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@ 光盘 路 径 


Chapter04/Media 


蓝 色 炫 光 按 钮 图 标 设计 


1 
Ne WW A 
于 4 


Level 一 一 一 一 一 炫 光 多 种 多 样 、 五 彩 缤纷 、 形 状 不 一 、 绮 丽 无 比 ， 炫 光 按 钮 是 手机 上 
We 经 和 过 到 的 工具 儿 案 ， 它 具有 唱 双 剔透 的 玻璃 质感 和 五 彩 组 纷 的 色泽 ， 让 
CS4 CS5 CS6 CC 人 爱不释手 。 


本 例 中 的 玛 色 炫 光 按 钮 图 标 直 接 醒 目地 传达 了 所 要 表达 的 信息 ， 设 计 师 和 完 以 局 天色 搭配 
光 效 绘制 出 透明 的 水 唱 质 感 感 座 ， 再 使 用 沉稳 的 黑色 绘制 出 立体 的 按钮 主体 部 分 ， 最 后 绘制 
上 电源 图 标 ， 辅 以 过 该 色 ， 制 作 完 成 一 个 逼真 的 是 色 炫 沦 按 钮 岁 标 。 


OQO1 新 建文 件 执行 “文件 > 
新 建 ” 命 令 或 按 下 快捷 键 
人 
对 话 杠 中， 新建 宽度 和 高 度 分 
别 为 300 和 250 的 像素 ， 完 成 
后 单 击 “ 人 确定 ”按钮 结束 ， 如 
图 团 加 折 示 。 


0 〇 2 绘制 背景 设置 前 景色 为 灰 
全 
按 下 快捷 键 Alt+Delete> 为 背 
景 填充 颜色 ， 如 图 国 贺 所 示 。 


Al 
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〇 3 绘制 李 贺 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ” 
设置 填充 为 蓝 色 (R: 41，6: 
hm Ou Be | 2 OG | a a I hat > 
刍 绘 制 正 贺 ， 得 到 “椭圆 1” 
图 层 ， 如 图 国 国 所 示 。 


〇 4 添加 描 边 单 击 图 层面 板 下 
方 的 “添加 网 层 样 式 ” 按 钮 ， 

在 弹出 的 下 拉 菜 单 中 勾 选 “ 描 
边 ” 命 令 , 设置 参数 , 添加 描 边 ， 

如 图 国 加 上 万 示 。 


0 〇 5 添加 内 阴影 单 击 图 层面 板 
下 方 的 “添加 图 层 样式 ”按钮 ， 
在 弹出 的 下 拉 菜 单 中 勾 选 “内 
阴影 ”命令 ， 设 置 参数 ， 添 加 
内 阴影 ， 如 图 加 四 所 示 。 


0 〇 6 添加 内 发 光 单 击 图 层面 板 
下 方 的 “添加 图 层 样式 ”按钮 ， 
在 弹出 的 下 拉 菜 单 中 勾 选 “内 
发 光 ” 命 令 ， 设 置 参数 ， 添 加 
内 发 光 ， 如 图 国 因 所 示 。 


(OO 7 添加 渐变 到 加 单 击 图 层面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 下 拉 菜 单 中 多 
选 “ 渐 变 琶 加 ”命令 ， 设 置 
参数 ， 添 加 渐变 三 加 ， 如 图 
四 上 所 示 . 


回 @TDO 一 
[2 +] oo ] 
| sf 中 站 尘 充 :|1oox| | 


we 


Th 


© | | 过 


DO .加 .向 辕 pe 
see 


措 这 
大 小 (S) :CPP 站 从 索 
位 置 (P): 外 部 v 
泥 合 模式 (BE) : 正常 


不 透明 度 (0) rr 100 % 


一 填充 尖 型 (F): 渐变 v 一 一 


证 | 站 所 


样式 (L) : 线性 Y ”| 久 | 与 图 后 对 齐 (G) 
R: 184 R: 184 R: 158 
白 BF 184 个 B; 184 B 158 白 
兴 隔 影 
一 符 构 
混合 模式 (B) : ”线性 加 深 ~ 国 加 
不 透明 度 (0) : ZS ss 20 二 


条 度 (A): (| 56 一度 回 使 用 全 局 光 (G) 


下 高 [D) : go 你 表 
(C) :CPP 人 % 
大 小 (S) :了 Se 10 像素 


国 村 本 
等 高 此 [A 同 清除 狗肉 (1) 


兴 发 光 
每 构 
混合 模式 (B) : ” 遍 色 加 深 - 

不 透明 度 (0) : ey 20 2 
杂 色 (N) : [ee 人 2 


o 国 OECD 
加 束 

方法 (Q): 祷 斑 v 
源 : @ 后 中 (E) ”图 边 缚 (G) 


阻塞 (C): [= 0 % 
大 小 (5) : = 一 10 像素 


渐变 

汤 合 模式 (0) : ”和 柔 光 回 仿 色 

不 进 明度 (p) -= 60 % 
w= | = 


样式 (L) : ” 径 向 图 与 图 层 对 齐 (IT) 


角度 (N) : (他 ) 120 度 


缩放 (S) : 一 一 一 一 一 100 多 


”es 
人 2 
B21 B: 34 


bpol 


O8 绘制 椭圆 单 击 工具 栏 中 
的 “椭圆 工具 ”按钮 ， 在 选项 
栏 中 选择 工具 的 模式 为 “ 形 
OR os TS ne > 2A 
正 圆 ， 得 到 “椭圆 2” 图 层 ， 
设置 图 层 的 填充 为 0， 如 图 因 
四 所 示 。 


〇 9 减 去 顶层 形状 单 击 工具 栏 
中 的 “椭圆 工具 ”按钮 ， 在 选 
项 栏 中 选择 “ 减 去 顶层 形状 ” 


选项 ， 绘 制 彬 圆 ， 如 图 国 
所 示 。 


1 0 添加 渐变 要 加 单 击 图 层面 
板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 
oa an 
1 2 RI I as yo Nay 
图 因 四 所 示 ， 


1 绘制 顶 圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 
a ee ela 
到 “椭圆 3” 图 层 ， 设 置 图 层 
的 填充 为 0， 如 图 团 园 所 示 。 


1 2 减 去 项 层 形状 单 击 工 具 栏 
中 的 “椭圆 工具 ”按钮 ， 在 选 
项 栏 中 选择 “ 减 去 项 层 形状 ” 
选项 ， 绘 制 梢 圆 ， 如 图 加 
所 示 。 
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源 合 模式 (0) : ” 登 加 | 回 


不 透明 度 (P) 一 团 


ene a) 


样式 (L): 线性 - 


名 度 (N): ( \ ) -50 度 


缩放 (S) : 一 一 一 一 


反 向 (R) 


120 |% 


设 团 为 就 认 位 D 


“ 国 


复 包 为 就 认 位 


CD 


_49- 


正常 | 不 透明 度 : 
锁定 : 因 中 国 境 充 : 
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13 单 击 图 层面 “ 
添加 渐变 到 加 单 击 图 层面 泥 合 模式 (9) : ”线性 光 仿 色 


安 广 3 


板 下 方 的 “添加 图 层 样式 ” 。 rassa: 一 a 


按钮 ， 在 弹出 的 下 拉 菜 单 中 rr sn 


勾 选 i i 加 | 命令 ， 充 角度 (N) : | oo 0 度 
管 参 数 》 湛 加 渐 变 看 站 加 如 缩放 (S) : ea 


图 国 园 所 未 。 


1 4 绘制 枯 圆 单 击 工具 栏 中 
Sa eal es i 
全 pad I Ly sa 
Oo A i 
<Shift> 键 绘制 正 圆 ， 得 到 “ 椭 
册 4” 图 层 ， 如 图 国 国 所 示 。 


15 闻 击 图 层面 “。。 
添加 渐变 又 加 单 击 图 层面 源 合 模式 (0) : ”正常 仿 角 


板 下 方 的 “添加 图 层 样式 ” 按 不 透 级 度 (P) : Ts 


| yy 、 | | 去 记 (>) 
0 ee = 


‘i wl ”命令 , 设置 参数 ， 课 度 (N) : / | 33 度 
添加 渐变 辣 加 ， 如 图 困 图 竺 惧 (5): 一 S130 
量 册 加 
所 示 ， ”um 
加 R: 80 R: 37 国 R: 21 转 R: 11 转 


16 绘制 形状 单 击 工具 栏 中 的 
“钢笔 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 


议 硬 蛆 克 WI 固 色 川 绘制 形状 ， © |: 
得 到 “形状 1” 图 层 ， 如 图 图 “a 

汪 不 。 他 计 画 和 渤 验 
pt GD .加 信和 让 图 


注 变 


内 


1 / 添加 渐变 又 加 由 图 层面 混合 模式 (9) : ”正常 ” 仿 色 
板 下 方 的 “添加 图 层 样 式 ” 按 不 透明 度 (F) : Emma 

、 是 本 辐 民 渐变 : 反 向 () 
钮 ， 在 弹出 的 下 拉 菜 单 中 多 选 。 一 


样式 (L) : 线性 v | 与 图 层 对 齐 (1) 
aa em Se 角度 00) : [全 让 一座 
数 ， 添 加 渐变 琶 加 ， 如 图 图 给 放 (S) :一 100—% 
辆 所 让 lL 图 图 
Li R: 204 ” 国 


5 人 
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4.7 
Ul 设计 师 必 读 : 图 片 格 式 


要 了 解 图 片 格式 的 特性 ， 衣 和 完 得 从 一 些 基本 概念 开始 。 如 下 读 者 耐心 把 这 部 分 内 容 读 完 ， 
相信 会 有 很 多 收获 。 
4. 7.1 天 量 图 与 像 系 图 


1. 矢量 图 

一 幅 完 美的 几何 图 形 矢 量 图 是 通过 组 成 图 形 的 点 、 线 、 面 、 边 杠 、 边 框 的 粗细 、 颜 色 以 
pen pe a A 3 a 站 刀 国 | 
可 以 通过 它 的 圆心 位 置 和 半径 来 描述 一 样 。 通 过 这 些 数据 ， 计 算 机 就 可 以 绘制 出 设计 者 所 定 
义 的 图 像 。 

任何 东西 都 有 两 面 性 。 矢 量 图 的 优点 是 文件 相对 较 小 ， 不 管 放大 还 是 缩小 都 不 会 失真 。 和 缺 
点 就 是 这 些 完美 的 几何 图 形 难 以 表现 自然 度 高 的 写实 图 像 。 

需要 强调 的 是 ， 大 家 在 Web 页 面 上 所 使 用 的 图 像 都 是 位 图 ， 有 些 像 和 撩 量 iCon 等 称 为 矢量 图 形 
其 实 也 是 通过 矢量 工具 进行 绘制 然后 再 转 成 位 图 格式 在 Web 上 使 用 的 。 

2. 像素 图 

像素 图 又 叫 位 图 、 栅 格 图 。 像 素 图 是 通过 记录 图 像 中 每 一 个 点 的 颜色 、 深 度 和 透明 度 等 信 
县 来 存储 和 显示 图 像 的。 一 张 像素 图 就 是 一 幅 大 的 拼图 ， 每 个 拼 块 都 是 一 个 纯色 的 像素 点 ， 当 
人 们 按照 一 定 规律 把 这 些 不 同 颜 色 的 像素 点 排列 在 一 起 的 时 候 ， 就 是 眼睛 所 看 到 的 图 像 。 因 此 
当 放 大 一 幅 像 素 图 时 ， 就 能 看 到 这 些 拼 片 一 样 的 像素 点 。 

Ea En a | 2 2 a 
或 缩小 图 像 就 会 失真 ， 即 不 论 放大 或 缩小 ， 图 片 看 起 来 都 是 比较 虚 的 。 


4. 7.2 上 压缩 格式 


从 上 面 的 介绍 中 ， 可 以 知道 对 于 存储 摄影 和 写实 图 像 ， 还 是 压缩 格式 JPG 更 适合 。 接 下 来 ， 
不 妨 找 一 张 摄影 作品 试 试 。 

上 图 是 一 幅 照 片 ， 分 别 用 JPG 60%、PNG8 256 色 无 仿 色 、PNG8 256 色 扩散 仿 色 和 PNG24 四 
种 格式 进行 存储 。 很 明显 ， 用 JPG 存 储 图 像 的 时 候 ， 不 但 压缩 率 是 最 大 的 ， 而 且 也 能 尽量 保证 


ell 
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原 图 的 最 佳 还 原 效 果 。 使 用 PNG8 进 行 保 存 的 时 候 ， 图 像 文 件 不 仅 大 小 变化 大 ， 而 且 失 真 也 最 严 
重 。 使 用 PNG24 的 格式 保存 ， 虽 然 能 保证 品质 ， 但 是 文件 大 小 要 比 JP6 大 得 多 。 之 所 以 会 有 这 种 
结果 ， 是 因为 JPG 和 PNG 各 自 的 压缩 算法 不 同 。 

由 于 受到 环境 光线 的 有 影响， 摄影 以 及 写实 作品 在 图 像 上 的 色彩 层次 很 丰富。 就 拿 下 和 面 这 幅 
图 片 来 说 ， 由 于 反光、 阴影 和 透视 效果 ， 人 物 腮 部 区 域 会 形成 明暗 、 深 浅 不 同 的 区 域 。 要 是 用 
PNG 去 保存 ， 束 需要 不 同 明暗 度 的 肤色 去 存储 这 个 区 域 。 PNG8 的 256 色 根本 没有 办 法 索引 整 张 图 
片上 出 现 的 所 有 颜色 ， 因 此 在 存储 的 时 候 ， 束 会 因为 丢失 颜色 而 失真 。 PNG24 虽 然 能 保证 图 像 的 
效果 ， 但 是 需要 比较 广泛 的 色彩 范围 来 进行 存储 ， 因 此 文件 也 会 显得 比较 大 ， 远 远 不 如 JP6G 的 存 
储 效果 。 因 此 ， 要 压缩 那些 真实 世界 中 复杂 的 色彩 ， 还 要 保持 还 原 最 佳 的 视觉 效果 ，JPG 的 压缩 
算法 是 最 好 的 。 

所 以 ， 可 以 得 出 以 下 结论 : 对 于 写实 的 摄影 图 像 以 及 颜色 层次 比较 丰 曙 的 岁 像 ， 要 想 保 存 成 
图 片 格式 ， 还 要 达到 最 佳 的 压缩 效 打 ，JPG 的 岁 片 格式 保存 是 最 佳 选 择 。 比 如 ， 人 像 采 集 、 商 品 岁 
片 和 实物 素材 制作 的 广告 Banner 等 图 像 采 用 JPG 的 图 片 格式 保存 ， 就 比 其 他 格式 的 要 好 得 多 。 


JPG 品 质 60% 大 小 200K PNG8 256 无 仿 色 大 小 260K 


综 上 所 述 ， 我 们 在 存储 图 像 的 时 候 ， 主 要 依据 图 像 上 的 色彩 层次 和 颜色 数量 选择 采用 JPG 


或 是 PNG。 对 于 那些 颜色 较 多 、 层 次 丰富 的 图 像 ， 束 米 用 JPG 存 储 ; 而 针对 一 些 颜色 简单 、 对 比 
强烈 的 图 片 就 采用 PNG。 但 是 这 也 不 是 绝对 一 成 不 变 的 ， 比 如 有 的 图 片 虽然 色彩 层次 丰富 ， 但 
是 图 像 尺 寸 较 小 ， 上 面 所 包含 的 颜色 数量 也 不 多 ， 这 时 候 也 可 以 采用 PNG 进 行 存 储 。 还 有 那些 
由 矢量 工具 绘制 的 图 像 ， 就 需要 采用 JPG 进 行 存 储 ， 因 为 它 所 采用 较 多 的 滤 镜 特效 会 形成 丰富 
的 色彩 层次 。 

另外 ， 针 对 一 些 用 于 背景 、 按 钮 、 寻 航 背 景 等 页 面 绪 构 的 基本 视觉 元 素 ， 要 保证 设计 的 品 
质 ， 就 必须 使 用 PNG 格 式 进 行 存 储 。 因 为 这 样 才能 更 好 地 加 入 一 些 元 素 。 对 于 那些 像 商品 图 片 和 
广告 Banner 等 对 质量 要 求 不 高 的 ， 用 JPG 去 进行 存储 就 可 以 了 。 
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4.7.3 非 压 缩 格 却 


非 压缩 格式 是 PNG 格 式 。 下 图 所 示 的 是 手机 里 最 常见 的 一 个 “Search” 图 片 按 钮 ， 笔 者 用 
JPG6 和 PNG8 两 个 格式 分 别 进行 保存 ， 大 家 可 以 看 到 ，JPG 保 存 的 文件 不 仅 是 PNG 保 存 的 文件 大 小 的 
两 倍 ， 还 出 现 了 噪点 。 是 什么 原因 造成 这 样 的 差异 呢 ? 


JPG 品 质 100% 大 小 60K PNG8 大 小 30K 


从 中 可 以 看 到 ，“Search” 这 个 按钮 是 通过 Photoshop 用 矢量 工具 绘制 出 来 的 ， 它 的 渐变 填 
充 是 很 规则 的 线性 渐变 ， 文 字 颜 色 和 描 边 都 采用 的 是 纯色 ， 因 此 它 所 包含 的 色彩 信息 很 少 。 所 
以 我 们 在 用 PNG 存 储 这 个 图 像 的 时 候 ， 只 需要 保存 很 少 的 色彩 信息 就 能 还 原 这 个 图 像 。 而 JPG 格 
式 存储 这 种 颜色 少 但 对 比 强 烈 的 图 片 时 ， 由 于 JPG 格 式 的 大 小 主要 取决 于 图 像 的 颜色 层次 ， 所 以 
反而 不 能 很 好 地 压缩 文件 大 小 。 

另外 ， 根 据 有 损 压 缩 的 压缩 算法 ，JP6 在 压 终 像 的 时 候 ， 会 通过 渐变 或 其 他 方式 填 苑 一 
些 被 删除 的 数据 信息 。 图 中 红色 和 白色 的 区 域 ， 由 于 色差 较 大 ， 所 以 JP6 在 压缩 过 程 中 就 会 填充 
一 些 额外 的 杂 色 进去 ， 这 样 就 会 影响 图 像 的 质量 。 所 以 ，JPG 不 利于 存储 大 块 颜色 相近 区 域 的 图 


4. 7.4 ”有 损 压 缩 与 无 损 讨 缩 


1. 有 损 压 缩 

有 损 压 缩 ， 顾 名 思 义 就 是 在 存储 图 像 的 时 候 ， 不 完全 真实 地 记录 图 像 上 每 个 像素 点 的 数据 
信息 。 实 验证 明 ， 人 有 眼 对 光线 的 敏感 度 要 比 对 颜色 的 敏感 度 高 ， 当 颜色 缺失 的 时 候 ， 人 脑 驶 会 
利用 与 附近 最 接近 的 颜色 来 自动 填补 缺失 的 颜色 。 所 以 ， 有 损 压 缩 就 根据 人 眼 观 察 的 这 个 特性 
对 图 像 数 据 进 行 处 理 ， 去 挥 那 些 图 像 上 会 被 人 眼 忽 略 的 细节 ， 再 使 用 接近 的 颜色 通过 渐变 以 及 
其 他 形式 进行 填充 。 这 样 不 仅 降 低 了 图 像 信 息 的 数据 量 ， 还 不 会 影响 图 像 的 还 原 效 果 。 
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图 片 放 大 后 看 到 有 损 压 缩 的 痕迹 
最 利 采 用 的 对 图 像 信息 进行 处 理 的 有 损 压 缩 是 JP 格式 。JPG 在 存储 图 像 的 时 候 ， 衣 先 把 图 
像 分 解 成 8X8 像 系 的 栅 格 ， 再 对 每 个 栅 格 的 数据 进行 压 绽 处 理 。 所 以 在 放大 一 幅 赂 像 的 时 候 ， 
就 会 及 现 这 些 8X 8 像素 栅 格 中 有 很 多 细节 信息 被 删除 。 这 束 是 用 JPG 存 储 图 像 会 产生 块 状 模糊 


的 原因 。 

2.， 无 损 压 缩 

和 有 损 压 缩 不 一 样 ， 无 损 压 缩 会 真实 地 记录 图 像 上 每 个 像素 点 的 数据 信息 。 为 了 压缩 图 像 文 
件 的 大 小 ， 无 损 压 缩 还 是 会 采取 一 些 特殊 的 算法 。 无 损 压 缩 首 先 要 判断 图 像 上 哪些 区 域 的 颜色 是 
相同 的 ， 哪 些 是 不 同 鸭 ， 再 把 这 些 相 同 的 数据 信息 进行 压缩 记录 ， 最 后 把 不 同 的 数据 另外 保存 。 
比如 存储 一 幅 蓝 天 白云 的 图 片 ， 一 片 蓝 色 的 填空 就 属于 相同 的 数据 信息 ， 只 需要 记录 起 点 和 终点 
的 位 置 ， 天 空 上 的 白云 和 渐变 等 不 同 的 数据 ， 就 要 另外 保存 。 

最 常见 的 一 种 采用 无 损 压 缩 的 图 片 格 式 是 PNG 格 式 。 因 为 无 损 压 缩 在 存储 图 像 的 时 候 ， 要 先 
判断 图 像 上 哪些 地 方 是 相同 的 ， 哪 些 地 方 是 不 同 的 ， 所 以 就 要 对 网 像 上 所 有 出 现 的 颜色 进行 索 
引 ， 这 些 颜 色 了 驶 是 索引 色 。 索 引 色 和 绘制 这 幅 图 像 的 调 色 板 一 样 ，PNG 在 显示 网 像 的 时 候 ， 残 会 
用 【〈 索 引 色 ) 调 色 板 上 的 颜色 去 填充 相应 的 位 置 。 

有 的 时 候 ， 虽 然 PNG 采 用 的 是 无 损 压 缩 的 保存 ， 可 是 PNG 格 式 的 图 片 还 会 失真 。 其 实 对 于 有 
损 压 缩 来 说 ， 不 管 图 像 上 的 颜色 有 多 少 ， 都 会 损失 图 像 信 息 。 这 是 因为 无 损 压 缩 的 方式 只 会 尽 可 

能 真实 地 还 原 岁 像 ， 但 是 PNG 格 式 是 通过 索引 图 像 上 相同 区 域 的 颜色 进行 压 纵 和 还 原 的 ， 也 残 是 
说 只 有 在 图 像 上 出 现 的 颜色 数量 比 保存 的 颜色 数量 少 的 时 候 ， 无 损 压 缩 才能 真实 地 记录 和 还 原 图 
像 ， 要 是 图 像 上 出 现 的 颜色 数量 大 于 保存 的 颜色 数量 ， 就 会 丢失 一 些 图 像 信 息 。 像 PNG 格 式 最 多 
才能 保存 48 位 颜色 通道 ，PNG8 最 多 只 能 索引 256 种 颜色 ， 因 此 对 于 颜色 较 多 的 图 像 就 不 能 真实 还 
原 ， 而 PNG24 能 保存 1600 多 万 种 颜色 ， 这 样 加 能 够 真实 还 原 人 类 肉眼 所 能 分 辨 的 所 有 颜色 。 
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本 章 收 录 了 了 4 个 界面 和 图 标的 设计 实践 练习 ， 包括 图 形 绘 制 、 
图 层 样 式 技 巧 等 操作 。 通 过 3 了 这些 练习 ， 可 以 使 该 者 更 加 深刻 地 
认识 到 光与影 在 设计 中 起 到 的 重要 作用 。 


矢量 工具 的 应 用 
透视 感 和 玻璃 质感 
图 层 样 式 

J 


rr 下 3:24PM 
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@ 光盘 路 径 


Chapter05/Media 


Level 一 一 一 一 玻璃 质感 被 广泛 应 用 于 设计 中 ， 可 以 说 是 设计 师 的 宠儿 。 这 不 仅 因 为 
玻璃 看 上 去 玲珑 剔透 、 透 明 质感 非常 好 ， 还 因为 玻璃 的 反光 会 轻松 彰 造 出 
CS4 CS5 CS6 CC 清新 、 唯 美的 感觉 。 


本 例 先 使 用 木质 砌 纹 素 材 做 背景 ， 再 挫 配 品 至 剔透 的 玻璃 ， 传 达 出 一 种 干 闪 利沙 的 氛 
围 ， 恰 到 好 处 的 高 光 和 阴影 搭配 使 得 画面 十 分 遏 上 、 写 实 。 


:| a 
三 
J 山 J i 


名 称 (N): 未 标题 -1 


01 执行 “文件 > ee . 
狐 建 ”命令 ,或 按 下 快捷 键 / 


宽度 (W): 1467 像素 


《Ctr1+0>, 打开 “新 建 > 对 话 框 ， as 二 
创建 1467X1250 像素 的 文档 ， 分 辩 率 (R): 300 像素 /英寸 “~ 
完成 后 单 击 “ 确 定 ” 按 钮 ， 如 4 

背景 内 容 (CO: 白色 - 


几 团 加 所 示 。 


从 | 高 级 
颜色 配置 文件 (D): 工作 中 的 RGB: sRGB IEC6196... 
像素 长 宽 比 (X): 了 
方形 像素 


50% 文档 :525M10 字 节 


(2 导入 素材 执行 “文件 > 打 EE 
开 ” 命 令 ， 在 弹出 的 打开 对 话 ee 
框 中 选择 “背景 素材 . jpg” 
将 其 打开 拖 入 到 场景 中 ， 如 加 
加 所 示 。 


人 


(0 〇 3 绘制 选区 单 击 工具 箱 中 
的 “ 圆 角 矩形 工具 ”按钮 ， 在 
选项 栏 中 设置 工作 模式 为 “路 
fe a 
面 上 绘制 路 径 ， 按 下 快捷 键 
人 全 
区 并 新 建 一 个 阴影 图 层 ， 如 图 
固 因 所 未 。 


0 〇 4 绘制 阴影 掖 下 快捷 键 
~ Sm ft > Te ath 1 
选区 ”对 话 框 中 设置 羽化 值 。 
Di Nt tl 
按钮 并 进行 设置 ， 在 选项 栏 中 
选择 “ 径 回 渐变 ”选项 , 单 击 “点 
按 可 编辑 渐变 ”按钮 ， 在 弹出 
的 对 话 框 中 设置 渐变 颜色 ， 在 
选区 内 拖 搜 并 填充 颜色 ， 如 图 
四国 困 所 示 。 


〇 5 添加 图 层 蒙 版 单 击 “ 图 层 
面板 ”下 方 的 “添加 图 层 蒙 版 ” 
和 a 3 a Es a 
具 箱 中 的 “画笔 ”按钮 ， 在 选 
项 栏 中 设置 参数 ， 在 页 面 上 进 
行 涂抹 ， 将 图 像 部 分 隐藏 ， 如 
图 四 国 四 所 示 。 


0 绘制 回 角 矩形 单 击 工具 箱 
BN ss hl 
oe te mA Es Ro ee 
页 面 上 绘制 形状 。 在 “图 层面 
板 ” 中 设置 填充 为 0%， 并 双击 
该 图 层 ， 在 弹出 的 “图 层 样 式 ” 
对 诅 民 外 选择 | 摘 边 六 和 “其 
色 登 加 ”选项 ， 设 置 参 数 ， 为 
其 添加 效果 ， 如 图 国 
所 示 。 
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羽化 半径 (R): 15 像素 


”渐变 类 型 (T): 实 底 
平 渭 度 (M): |100|，|% 

a 2 9 

国 国 
色 标 

不 透明 度 (0): 25| ，% 位置 (C): 0 % 蛤 除 (D) 


颜色 位 四 加 是 除 (D) 


大 小 G): 6 像素 
位 置 p): 外 部 ~ 

混合 模式 (6): 正常 ~ 

不 透明 度 (0): = 100  % 


一 “填充 类 型 渐变 ~ 


新 朗 : 反 向 R) 
样式 (): 线性 ~ 团 与 图 层 对 齐 (6) 


角度 (A): 人 人 137 度 回 念 色 
4 
缩放 (CO): 2 100 % 


设置 为 默认 值 复位 为 默认 值 


一 颜色 到 加 
一 颜色 一 : 


混合 模式 (8): 正常 ~ 
不 透明 度 (0): 2 一 二 ” % 


设置 为 默认 值 复位 为 默认 值 


Ly 
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(OO / 复制 形状 复制 “形状 1” 
图 层 ， 为 “形状 1” 拷贝 图 层 ， 
清除 该 图 层 的 图 层 样式 。 再 双 
击 图 层 ， 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “ 描 边 ” 和 “投影 ” 
选项 ， 设 置 参数 ， 为 其 添加 效 
果 ， 如 图 四 贺 因 所 示 。 


描 边 
结构 
大 小 8): ES 6。 像素 
位 置 p): 外 部 > 
混合 模式 (6): 正常 Mi 
不 透明 度 (0): py 100  % 
一 填充 类 型 (F): 渐变 ~ 


新 讼 : D&AR) 
样式 (): 线性 ~ 加 与 图 层 对 齐 (G) 


角度 A: ( A 一度 日 
弟 放 (C): A 100  % 


设置 为 默认 值 复位 为 默认 值 


投影 


08 绘制 椭圆 单 击 工具 箱 中 
的 “本 圆 王 旧 训 接 锂 吊 在 选项 
栏 中 选择 工具 模式 为 “形状 ”， 
按 住 Shift> 键 在 页 面 上 绘制 
正 贺 ， 如 图 因 四 所 示 。 


(9 添加 渐变 要 加 双击 “形状 
2” 图 层 , 在 弹出 的 “图 层 样 式 ” 
oo a 

选项 ， 设 置 参数 ， 为 其 添加 效 
术 ， 如 图 团 图 困 所 示 。 


一 渐变 又 加 


结构 


混合 模式 (6): 正片 县 底 - 
不 透明 度 (0): 一 % 


角度 (A): @ !) 6” 度 回 使 用 全 局 光 (G) 


扩展 (R): CP 0 9 
了 中 \(S): = 5 像素 


渐变 


混合 模式 (0) 正常 ~ 回 仿 色 
不 透明 度 p): 一 2 100 % 
渐变 : 辐 反 向 (R) 
样式 (): 角度 ~ ” 团 与 图 层 对 齐 (0) 
角度 0: 全 0 ” 讼 
缩放 (6): 一 7” 100 


% 


10 添加 斜面 和 浮雕 双击 “ 形 


名 称 (N): 。 自 定 


| ”渐变 类 型 (T): 实 底 ~ 


平滑 度 (M): | 100 | 


新 建 (W) 


% 


样式 (1): 内 什 面 
方法 (Q): 平滑 


bd 


bd 


和 
人 


深度 (D): To 83 


方向 : @ 上 @ 下 


2 = 


软化 (F): CP 0 


% 


像素 
像素 


浮雕 ”及 “投影 ”选项 ， 设 置 
参数 ， 为 其 添加 效果 ， 如 图 团 
困 所 示 。 


120 度 


高 光 模式 (H): 滤 色 


阴影 模式 (A): 


站 使用 全 局 光 (G) 
30 | 


-| 
不 透明 度 0): 2 一 一 52  % 
正片 一 底 
不 透明 度 O: TT 一 > 0  % 


度 


消除 锯齿 (0) 


- 国 硬 


投影 


结构 


混合 模式 @): 正片 妥 底 
不 透明 度 (D): 一 一 57 % 
角度 (A): Q) 100 度 
距离 0): 一 一 6 
扩展 Ri: C= 二 一 0 % 
大 小 GS): 一 一 7 


~ 国 国 


[使 用 全 局 光 (G) 
”像素 


像素 


le 


生生 复制 形状 选择 “形状 2” 
图 层 ， 连 续 三 次 按 下 快捷 键 
<Ctrl+J>， 将 图 层 复 制 三 次 ， 

如 图 团 困 所 示 。 


12 导入 素材 执行 “文件 > 打 
开 ” 命 令 ， 在 打开 的 对 话 框 中 
pn a eso a 
其 打开 并 拖 入 到 场景 中 ， 如 图 
国 所 示 . 


1 3 绘制 贺 角 矩形 单 击 工具 箱 
中 的 “ 圆 角 矩形 工具 ”按钮 ， 
设置 工作 模式 为 “形状 ”， 在 
页 面 上 绘制 形状 。 在 “图 层面 
板 ” 中 设置 填充 为 %， 并 双击 
该 图 层 ， 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “内 阴影 > 和“ 颜 
色 倒 加 ”选项 ， 设 置 参数 ， 为 
其 添加 效果 ， 如 图 团 
所 示 。 


1 4 添加 外 发 光 双击 “形状 3” 
图 层 ， 在 弹出 的 “图 层 样 式 ” 
对 话 框 中 选择 “外 发 光 ” 和 “ 投 
影 ” 选 项 ， 设 置 参数 ， 为 其 添 
加 效果 ， 如 图 图 辆 国 所 示 。 


一 内 阴影 


一 颜色 亚 加 


结构 


混合 模式 @): 正片 到 底 ~ 国 国 
不 透明 度 (0): T= 一 8  % 
角度 (A): (wp 50 ” 度 回 使 用 全 局 光 (G) 


阻塞 (C): CP 0 0 
大 小 5): SE 一 一 20 像素 


颜色 


混合 模式 (6): 正常 -En 
不 透明 度 (O): To op 


设置 为 默认 值 复位 为 默认 值 


杂 色 (从 ): CPs oo 


一 外 发 光 
结构 
混合 模式 E): 滤 色 ~ 
不 透明 度 (0): Se 5 % 


图 素 


方法 (Q@): 杀 和 
大 小 (5): 910) 像素 


投影 


结构 


混合 模式 (6): 正常 > 
不 透明 度 (0): se 1  % 
角度 (A): ey 50 度 回 使 用 全 局 光 (c) 


扩展 (R): CP 0 9 
大 小 (S): < 一 2 像 喜 


OU 
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| 国外 工人 口 前 
:| 不 又 明度 : |100% | ~ | 
鲍 E: 加 sf 中 日 十 太 : [100%]-] 


| | 


CD 太 .， 回 优 、 和 让 | L230 


15 绘制 形状 单 击 工具 箱 中 的 

“ 圆 角 矩形 工具 ”按钮 ， 设 置 工 
作 模 式 为 “形状 ”， 在 页 面 上 给 
制 形状 。 在 “图 层面 板 ” 中 设置 
填充 为 0%， 并 双击 该 图 层 ， 在 
弹出 的 “图 层 样 式 ” 对 话 框 中 选 
择 “ 内 阴影 ” 和 “颜色 炙 加 ” 选 
项 ， 设 置 参数 ， 为 其 添加 效果 ， 
如 图 国 国 国 所 示 ，。 


16 添加 图 层 样式 双击 “形状 
4” 图 层 , 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “外 发 光 ” 和 “ 投 
影 ”选项 ， 设 置 参数 ， 为 其 添 
加 效果 ， 如 图 四 团 加 所 示 。 


1 7 绘制 贺 角 矩形 单 击 工具 箱 
中 的 “ 圆 角 矩形 工具 ”按钮 ， 

WU Re 
页 面 上 绘制 形状 。 在 “图 层面 
板 ” 中 设置 填充 为 0%， 并 双击 
该 图 层 ， 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “内 阴影 ”和 “ 投 
时 A 
加 效果 ， 如 图 图 加 轿 所 示 。 


1 8 添加 外 发 光 双击 “形状 5” 
图 层 ， 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “外 发 光 ” 选 项 ， 
设置 参数 ， 为 其 添加 效果 ， 如 
图 困 贺 所 示 。 


一 内 阴影 


Photoshop APP UI 设计 从 入 门 到 精通 


结构 


混合 模式 (6): 正片 又 底 ~ 国 国 
不 透明 度 (0): TI 一 一 8 % 
角度 (A): (wy 强度 团 使 用 全 局 光 (6) 
距离 (0D): = 5 像素 
阻塞 (CO): (P= 0 oo 
大 小 (5): A 32 像 喜 


一 颜色 严 加 


颜色 


混合 模式 (8)， 正常 -En 
不 透明 度 (O): Eo oo 


设置 为 默认 值 复位 为 默认 值 


一 外 发 光 

结构 

混合 模式 日 : 源 色 > 

不 涝 明度 (0): 2 一 目 。 % 
末 色 (N): Pe oo 
eD © rs] 

图 素 
方法 Q): 柔和 ~ 
扩展 (P): CC 0 oo 
大 小 9): 一 一 10 像素 


投影 


结构 


混合 模式 6): 正常 到 
不 透明 度 (0): ss 24  % 


扩展 (R): Pe 0 


大 中 ‘(9S): 一 4 像素 


角度 (A): C 1) 0 度 回 使 用 全 局 光 (G) 


一 内 阴影 


结构 


混合 模式 (5)， 正片 又 底 - 
不 透明 度 (0): Re 8 % 
角度 内 :| 上】 50。 度 回 使 用 全 局 光 人 
阻塞 (0): Ce 0 % 
大 小 (S): A TE 5 任 素 


投影 


结构 


温 合 模式 (6): 正常 M 
不 通明 度 (0): = 13 % 
角度 :| 上 】 0。 度 回 使 用 全 局 光 人 
扩展 (R): Pe 0 oo 
大 小 (S): CO 0 像 喜 


一 外 发 光 


结构 


混合 模式 (E): 滤 色 M 
不 透明 度 (0): 11 % 
杂 色 (人 N): 一 o6 


© © [| 


图 素 


方法 (Q): 柔和 ~ 
扩展 (Pp): (=» 0 oo% 
大 小 (S): = 一 15 像素 


品质 


#8: | "| 口 消 Sia 上 0 
范围 R): = 一 50  % 
抖动 (): CC 0 oo 


da 


19 绘制 加 角 和 矩形 单 击 工具 箱 
中 的 “ 圆 角 矩形 工具 ”按钮 ， 
设置 工作 模式 为 “形状 ”， 在 
页 面 上 绘制 形状 。 在 “图 层面 
板 ” 中 设置 填充 为 0%， 并 双 市 


第 5 章 APP UI 中 的 光与影 


一 渐变 到 加 
渐变 
混合 模式 (0): 正常 ~ 回访 色 
不 透明 度 (P): 二 ys 100 % 
淅 六 : [有 | 回 反 向 (R) 


样式 (0): 线性 ”| 财 与 图 层 对 齐 (D 
浆 .作答 浆 
角度 (N) wi 90 度 


编 肌 (6): = 100 % 


该 图 层 , 在 弹出 的 “图 层 样式 ” 
Do pe ee si 
“投影 ”选项 ， 设 置 参 数 ， 为 
其 添加 效果 ， 如 图 园 
所 未 。 


人 20 绘制 矩形 单 击 工 具 箱 中 的 

ee | eae I- 
模式 为 “形状 ”， 在 页 面 上 给 
制 形状 。 在 “图 层面 板 ” 中 设 
置 填充 为 0%， 并 双击 该 图 层 ， 
在 弹出 的 “图 层 样式 ”对 话 杠 
中 选择 “颜色 甘 加 ”和 “投影 ” 
选项 ， 设 置 参数 ， 为 其 添加 效 
果 ， 如 图 团 国 国 所 示 。 


人 1 添加 文字 单 击 工具 箱 中 的 
i oa ee Ea 
面板 ”中 设置 字体 为 “微软 雅 
pe ras po es 


图 国 国 所 未 。 


人 FV 添加 投影 分 别 双击 各 文字 
图 层 ， 在 弹出 的 “图 层 样式 ” 
对 话 框 中 ， 选 择 “ 投 影 ” 选 项 ， 
设置 参数 ， 为 文字 添加 效果 ， 
如 图 团 加 所 示 。 


设置 为 默认 值 复位 为 默认 值 


投影 


结构 
混合 模式 (6): 正片 亚 底 ~ 国 国 
角度 (A): (4) 50 ” 度 团 使 用 全 局 光 (6) 


扩展 (R): CPP 0 9 


大 小 (5): a 像素 
一 颜色 到 加 
颜色 
混合 模式 (6): 正常 MM 


不 透明 度 (0): 一 Z > 36  % 


设置 为 默认 值 复位 为 默认 值 


投影 
结构 
混合 模式 (6): 正片 到 底 ~ 国 国 
不 透明 度 (0): se 27 % 


/@ 让 se 
角度 (A): Ro DE 度 加 | 使 用 全 局 光 (G) 
扩展 (R): (0) oo 
大 小 (S): < 一 0 像 索 国 
52 


[第 “| 明度: [100%] -| 
包 诈 : 团 2 中 和 填充 : 100%| | 


ee 
r Ne 


一 月 
可 子女 十 


248 954 
邮件 ”已 读 


一 颜色 晋 加 


颜色 
混合 模式 (6) 正常 v[L | 


不 透明 度 (0): Zr 36  % 


设置 为 默认 值 复位 为 默认 值 


da 


Photoshop APP UI 设计 从 入 门 到 精通 


人 3 绘制 高 光 单 击 工具 箱 中 
os a ss Dai 年 注 一 
中 绘制 封闭 路 径 ， 按 下 快捷 键 区 piu。 加 ooTHgE 


《Ctrl+Enter> 将 其 转换 为 选 | 页 和 明度 : 


区 ,天 渐 建 一 个 图 层 为 “局 光 1” 
加 || a | 9 
国 所 不 。 


2 4 沃 加 渐变 要 加 选择 “高 光 
0 0 ei 渐变 到 加 
置 填 充 为 0%， 双击 该 图 层 ， 在 正常 vv 回访 色 


、 条 6 己 样 下 3 透明 度 p): zs 一。 15  % 
弹出 的 “图 层 样式 ”对 话 框 中 ， | "my 一 5 


I En 2 | 样式 0: 线性 -” 回 与 图 层 对 章 四 
由 内 » » UN 角度 (N): (A 度 

参数 ， 为 其 添加 效果 ， 如 图 国 A EE 

缩放 G):， = 10 % 


团 所 未 。 


人 DD 绘制 高 光 单 击 工具 箱 中 
人 
中 绘制 封闭 路 径 ， 按 下 快捷 刍 
CO ton hn or > Dlg Ml ee A ee 
区 , 并 新 建 一 个 图 层 为 “高 光 2” 
图 层 ， 为 选区 填充 白色 ， 如 图 
国 所 示 ，。 


图 导 

四 TB 日 
| i 
0%] ~ 


@ 效果 
龟 渐变 严 加 


多 | 工 杏子 女士 到 
中 灰 . 回 马 . 外 加 63 


2 66 添加 渐变 到 加 选择 “高 光 
2” 图 层 ， 在 “图 层面 板 ”中 设 ne 
置 填充 为 0%， 双 击 该 图 层 ， 在 最 ; 


一 渐变 要 加 = 

弹出 的 “图 层 样式 ”对 话 框 中 ， 一 粮 
| Wl Wh I 混合 模式 (o)。 正常 ~ 占 人 色 248 对 
Re de i nt 不 通明 度 pj: 一 五 % 

Wy | ， 从 渐变 : [| 回 反 向 8) 
参数 ， 为 其 添加 效 末 ， 如 图 国 样式 (): 线性 ~” 回 与 图 层 对 齐 四 
国 所 吕 。 o 前 度 (N): (1) -0 度 

缩放 6): 一 7 一 一 100 % 


Uap 
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@ 光盘 路 径 


Chapter05/Media 


TH 料 质感 


5.2 


Keyword ”钢笔 工具 、 路 径 转 换 选 区 、 横 版 文字 工具 、 图 层 样式 
Level 一 一 一 一 一 牛仔 裤 的 材质 特点 是 布料 厚实 ， 质感 很 粗 久 ， 设 计 中 使 用 牛仔 裤 纹 理 
> 布料 会 使 怀旧 意味 更 加 强烈 。 个 全 社 由 于 料 子 的 相 性 与 邓 钦 ， 以 及 经 过 生 
床 的 打磨 与 日 后 的 罕 看 会 呈现 大 理 石 般 的 纹路 ， 这 些 都 是 设计 要 点 


本 例 主要 制作 牛仔 裤 纹 理 的 背景 ， 牛 仔裤 纹理 制作 的 界面 给 入 以 怀旧 、 酒 脱 感觉 ， 因 为 
ne eh 颜色 沉稳 又 不 失 神 秘 。 设 计 痢 先 制作 出 以 牛仔 裤 纹 理 为 育 景 的 界面 ， 再 通 
过 小 色 及 四 凸 效 果 绘 制 出 盾牌 ， 拱 配 文 字 以 及 颜色 完成 这 个 怀旧 风格 的 盾牌 。 


名 称 (N): 未 标题 -1 


OO1 新 建文 件 执行 “文件 > 本 
新 建 ” 人 命令 ， 或 按 快 捷 键 


、 宽度 (W): 1122 估 妻 
<Ctr1+0>， 打 开 “ 新 建 ” 对 话 框 ， 

高 度 (H): 633| 像素 = 
创建 1122X633 像素 的 多 档 ， 分 养 率 (R): 300 像素 /英寸 “~ 
完成 后 单 击 “ 确 定 ” 按 钮 ， 如 SEO Ro RE ~ ef ~ 

背景 内 容 (C): 白色 Md 
图 辆 贺 所 示 。 本 
颜色 配置 文件 (DO): sRGB IEC61966-2.1 M4 
像素 长 宽 比 (X): 方形 像素 ” 


0 〇 2 绘制 背景 双击 “背景 ” 
图 层 ， 将 其 转换 为 普 ui 
We HU eb A he 
AN De vey nu 攻 轴 罗 | 
四 万 示 。 


| 所 类 型 | 中 TI 力 
| 正常 * | 环 透 明度 : | 100% | 
训 E: 图 中 加 ” 填 训 :|100%| 


= 和 下 : 


3 六 EE 


peel 


Photoshop APP UI 设计 从 入 门 到 


〇 3 添加 图 案 权 加 继续 双击 图 
层 ， 在 弹出 的 “图 层 样式 ”对 
话 框 中 选择 “图 案 状 加” 选项， 
设置 参数 ， 为 其 添加 效果 ， 如 
图 困 国 所 示 。 


O4 添加 渐变 要 加 继续 在 “图 
层 样 式 ” 中 选择 “渐变 大 加 >” 
选项 ， 设 置 参数 ， 为 其 添加 效 
末 ， 如 网 园 加 上 所 示 。 


0 〇 5 绘制 盾牌 底部 新 建 “ 盾 
牌 底部 ”图 层 ， 单 击 工具 箱 中 
的 “钢笔 工具 ”按钮 ,在 页 面 
中 绘制 封闭 路 径 ， 按 快捷 键 
<Ctrl+Entery> 将 路 径 转换 为 选 
区 ， 单 击 工具 箱 中 的 “渐变 工 
具 ” 按 钮 ， 在 选项 栏 中 选择 “ 线 
性 渐变 ”， 单 击 “ 点 按 可 编辑 
渐变 ”按钮 ， 在 弹出 的 对 话 杠 
中 设置 颜色 参数 ， 如 图 因 
国 所 示 。 

0 〇 6 添加 外 发 光 双击 “盾牌 底 
部 ”图 层 , 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “外 发 光 ” 选 项 ， 
设置 参数 ， 为 其 添加 效果 ， 如 
图 因 因 所 示 . 


OO 7 添加 描 边 继续 在 “图 层 样 
式 ” 中 选择 “ 描 边 ”选项 ， 设 
置 参数 ， 为 其 添加 效果 ， 如 图 
困 所 示 . 


精通 


图 案 伙 加 

图 案 

混合 模式 (6): 正常 M 

不 透明 度 (Y): 2 100  % 
图 案 : [7 加 | 贴 紧 原 点 (A) |] 
缩放 (5): | 100  % 


避 与 图 层 链 接 (gg 
| 设置 为 默认 值 。 | | 复位 为 默认 值 


渐变 琶 加 

渐变 

混合 模式 (D): 颜色 减 浅 M 仿 色 
不 透明 度 (p): » 100 % 


渐变: [| 团 皮 向 R) 
样式 (): 径 向 ~ 团 与 图 层 对 齐 () 


角度 :| 一 0 度 


缩放 (5): Z5 100 嗓 


| 设置 为 默认 值 “| | 复位 为 默认 值 


rr | Ci 
4 4 
DAA AY ye 
存储 (S)..… 
名 称 (N): ” 自 定 [| 新建 (W) 
渐变 类 型 (T): 实 底 ~ 
平滑 度 (M): | 100|*|% 
号 品 
| 白 
色 标 
不 透明 度 (0):| 15 |] ，|% 位置 (C): 0 % [是 除 (D) |] 
i 加 BB 日 日 | 棋 世 :| 下 *| 不 委 明 度 : |100%| -| | M 所 向 杀人 BE 10 
处 发光 
结构 
混合 模式 (E): 正常 M4 
不 透明 度 ( De 10 % 
杂 色 人 N): C 0 % 
a 国 OERER | 
图 素 
方法 (Q@): 杀 和 
扩展 (PP): 一 一 53 % 
大 小 (9): 2 像素 
描 边 
结构 
大 小 (S): 上 c 像素 
位 置 p): 外 部 了 
混合 模式 (6): 县 加 ” 
不 透明 度 (D): mW 100  % 


填充 类 型 F): 渐变 了 


W 朗 : 【|v| 口 反 向 w 


样式 (LD): 续 性 Y 加 与 图 层 对 齐 (G) 
角度 (A): 17 度 仿 色 
缩放 (C): 一 100  % 


[ 设置 为 默认 值 ”| [ 复位 为 默认 值 


各 
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投影 


08 添加 投影 继续 在 “图 层 样 。 天 
| 混合 模式 (5) 正片 又 底 - 国 国 
Fa ea a 不 和 明度 0): 一 一 一 条” % 
置 参数 ， 为 其 添加 效果 ， 如 图 ae 
距离 (0): Ce 0 像素 
3 扩展 RQ): C= 一 0 % 
国 所 不。 大 小 (3): 一 yg=， 199 像素 
品质 
等 高 线 [4 湖 用 据 齿 () 
杂 色 Mi: 一 0 % 
可 图 层 控 空 投影 (J) 


| _ 设置 为 默认 值 _| | 复位 为 默认 值 


〇 9 绘制 形状 新 建 “ 右 边 ”图 Ee 
| 所 尖 型 $s| 国 阁 工 吕 痢 


| rh Tot 7 4 

具 ” 按 钮 ， 在 页 面 中 绘制 封闭 | 正 党 :| 不 透明 度 : |100%| * | 
路 径 ， 按 快捷 键 《Ctr1+Enter> 议定 : 图 yf 中 日 境况 :|100%| "| 
将 路 径 转 换 为 选区 ， 设 前 号 上 上 一 | 右边 ! 
景色 为 白色 ， 按 下 快捷 键 号 | 时 | 盾牌 底部 ll 
《<Alt+Delete》 为 选区 填充 颜 Se — 加 
色 ， 如 图 困 困 上 所 示 。 ee 


靳 变 亚 加 
10 添加 渐变 要 加 双击 “右边 ” | 于 
混合 模式 (D): 线性 加 深 了 | 回信 色 


图 层 ， 在 弹出 的 “图 层 样 式 ” 不 泛 明 度 (P): 一 0 
、 66、 3 oo [| 器 反 向 R 
对 话 框 中 选择 “渐变 奏 加 ” 选 样式 0 线性 ~ 团 与 图 层 对 齐 () 


项 ， 设 管 参数 ， 为 其 添加 效果 ， J 


a 缩 天 (56): NS 100 % 
如 图 园 团 所 示 。 [小 乾 位 为 默认 入 
图 案 到 加 
1 1 添加 图 案 相 加 继续 在 “图 
混合 模式 (6): 正常 - 


层 样 式 ” 中 选择 “图 案 登 加 ” 不 通明 度 m: 一 1 
选项 ,设置 参数 ,为 其 添加 效果 ， | | a CR 
如 图 所 未 。 缩放 (G): 四 

Y | 与 图 层 军 接 (K) 


| 设置 为 默认 值 。| | 复位 为 默认 值 


100 % 


| 投影 
1 2 添加 投影 继续 在 “图 层 样 ”ss 
有 | 中 | 混合 模式 (6): 正片 亚 底 ~ 加 
Eh etd dT 4 te hi a TD: 二 
置 参数 ， 为 其 添加 效果 ， 如 图 ew EE 
中 中 高 Di: = 一 0 像素 
国 上 所 人 No 扩展 R): A 0 % 
大 小 (9): Se 21 像素 
品质 
等 高 线 : -| 口水 锯 占 
杂 色 N: C= 一 0 % 
习 图 层 控 空投 影 (U) 
|_ 设置 为 默认 值 _」 | 复位 为 默认 值 | 


RU 


Photoshop APP UI 设计 从 入 门 到 精通 


2 “网 层 村 图 屋 “三 
1 3 复制 图 层 oe a Pp 型 ?| 回 wTSHIEg 上 是 
a a esa | 这 | 不肖 明度 : [100%| - 
置 参 数 ， 为 其 添加 效果 ， 如 图 wd ME 
i 多 | 右边 拷贝 kr 

团 所 未 。 @ [| 者 过 fr” 
@@ [ 里 | 盾牌 底部 友 ~ 

© 国 国 四 En f= 

电 效果 村 


DO .加 作 . 加 曾 


14 复制 图 层 新 建 “ 右 边 ” 


图 层 7 三 
层 ， 单 击 工具 箱 中 的 “钢笔 工 ET 
| 正常 :| 不 透明 度 : |100% | ~ 


具 ” 按 钮 ， 在 页 面 中 绘制 封闭 
路 径 ， 按 快捷 键 《Ctr1+Entery> 


HE : 图 中 加 填充 : |100% | 7 
@ | 时] 盾牌 底部 拷贝 


将 路 径 转 换 为 选区 ， 设 前 @ [| 右边 拷贝 fr 
景色 为 白色 ， 按 下 快捷 键 ?a lt 

中 | 二 | 盾牌 底部 fr = 
“ML Delete> A vel KI 效果 lL 


DO .加 @. 向 国 亩 


色 ， 如 图 困 困 所 示 。 


15 添加 描 边 在 “图 层面 板 ” _# 


结构 


中 设置 “盾牌 底部 拷贝 "图 层 | zc， 人 
位 置 p): 外 部 ~ 


a 0 Do i 2 混合 模式 (6): 到 加 
弹出 的 “图 层 样 式 ” 对 话 框 = 
中 选择 “ 描 边 ”选项 ， 设 置 wi | PI 
参 数 | 为 其 添 加 效 果 | 加 样式 (0): 线性 ”I 与 图 层 对 齐 (G) 


角度 (A): | | 117 度 仿 色 


所 不 8 缩放 (c): 一 100  % 


16 复制 图 层 选择 “盾牌 底 
部 拷贝 ”图 层 ， 按 快捷 键 
<@Otmbey2 各 届 几 | 局 图 案 秋 加 


图 案 


ea a | 
除 ， 双击 该 图 层 , 在 弹出 的 “图 | Fn | Dp ”4 


层 样式 ”对 话 框 中 选择 “图 案 和 0 
| Ly | 缩放 (): 一 一 一 % 
nb a St 5 
添加 效 | 如 转 所 示 。 | 设置 为 默认 值 | | 复位 为 默认 值 | 
1 7 添加 描 边 继续 在 “图 层 样 加 
、 、 、 、 结构 
计 W 中 选择 站 a je A, 设 大 小 (S): CS 3 像 喜 
置 参数 ， 为 其 添加 效果 ， 如 图 | em "” 
里 上 所 示 。 不 透明 度 (0): 一 人 10 % 
填充 类 型 F): 渐变 “~ 
渐变 : [一 一” “本 避 ~] 回 反 向 0) 
样式 (WD): 线性 ~ 团 与 图 层 对 齐 (6) 
角度 (A): | | 117 度 仿 色 
缩放 (c): 一 100  % 


18 绘制 选区 新 建 “ 盾 牌 底 
部 1” 图 层 ， 单 击 工具 箱 中 的 
Gm Esl i eh | ta Da 
中 绘制 封闭 路 径 ， 按 快捷 键 
< Omr nt ee 0 A 
区 为 基 填 充 黑 色 川 在 上 图 层 
面板 ”中 设置 填充 为 0%。 双 击 
该 图 层 ， 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “图 案 琶 加 ” 选 
项 ， 设 置 参 数 ， 为 其 添加 效果 ， 
如 图 国 国 上 所 示 。 


19 添加 描 边 继续 在 “图 层 样 
式 ” 中 选择 “ 描 边 ”选项 ， 设 
置 参数 ， 为 其 添加 效果 ， 如 图 
国 所 示 。 


0 绘制 选区 新 建 “ 盾 牌 底 
部 2” 图 层 ， 单 击 工具 箱 中 的 
sa aad ee rif 
中 绘制 封闭 路 径 ， 按 快捷 键 
“Ctrl+Enter> 将 路 径 转换 为 选 
区 ， 为 其 填充 黑色 ， 在 “图 层 
面板 ”中 设置 填充 为 %。 双 击 
该 图 层 ， 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “图 案 半 加 ” 选 
项 ， 设 置 参数 ， 为 其 添加 效果 ， 
如 图 四 贺 所 示 。 


人 之] 添加 图 层 蒙 版 选择 “盾牌 
底部 2” 图 层 ， 在 “图 层面 板 ” 
下 方 单 击 “ 添 加 图 层 蒙 版 ” 按 
钮 ， 使 用 “钢笔 工具 ”在 页 面 
上 绘制 封闭 路 径 ， 绘 制 完成 后 ， 
将 其 转换 为 选区 ， 为 其 填充 黑 
色 ， 将 图 像 部 分 隐藏 ， 如 图 四 
图 所 示 。 


图 案 到 加 
图 案 
混合 模式 (6): ”线性 加 深 M 
不 透明 度 (9): Se 80 % 
图 案 : 加 |[ 贴 紧 原 点 多 | 


换 放 (人 S): 100  % 


避 与 图 层 链 接 (0 


| 设置 为 默认 值 “| | 复位 为 默认 值 
描 边 
结构 
大 小 (5): 上 3 像素 
位 置 p): 外 部 > 
混合 模式 (6) 又 加 ~ 
不 透明 度 (D): = 100 % 
填充 类 型 (FF): 渐变 ~ 
渐变 : |v| 回 反 向 () 
样式 (DD): 线性 ~ 园 与 图 层 对 齐 (人 ) 
角度 (A): {117 度 仿 色 
缩放 (C): = 100  % 
图 案 到 加 
图 案 
混合 模式 (6): 变 高 ~ 
不 透明 度 (Y): ; 55 wo 
图 案 : 国 | | 一 贴 紧 原 点 (A) | 
缩放 (5): 他 128 % 
避 与 图 层 贬 接 ( 
| 设置 为 默认 值 。| | 复位 为 默认 值 


peg 
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jp :| 回 四 工 芋 国 

| 正常 *| 不 透明 度 : [100% | 
议定 :田中 四 填 达 :|0% | 
他 | 委 |®| 各 | 盾牌 底部 2 友 < 


他 效果 
号 图 案 到 加 
呈 | 雷 | 盾牌 底部 1 2 
他 效果 
号 指 边 
c 回避 . 辐 加 


Photoshop APP UI 设计 从 入 门 到 精通 


22 制作 相似 效果 综合 上 述 方 
法 制作 出 “盾牌 底部 3”， 如 
图 图 图 所 不 。 


人 3 绘制 形状 新 建 “ 中 间 ” 
层 ， 单 击 工具 箱 中 的 “钢笔 工 
有 具 ”按钮 ， 在 页 面 中 绘制 封闭 
路 径 ， 将 路 径 转 换 为 选区 ， 为 
其 填充 白色 。 双 击 该 图 层 ， 在 
弹出 的 “图 层 样式 ”对 话 框 中 
选择 “渐变 琶 加 ”选项 ， 设 置 
参数 ， 为 其 添加 效果 ， 如 图 图 
园 所 示 。 


24 添加 描 边 继续 在 “图 层 样 
式 ” 中 选择 “ 描 边 ”选项 ， 设 
置 参数 ， 为 其 添加 效果 ， 如 图 
图 四 所 示 ，。 


人 FD 添加 图 案 权 加 继续 在 “图 
层 样 式 ” 中 选择 “图 案 关 加 ” 
选项 , 设置 参数 , 为 其 添加 效果 ， 
如 图 园 团 所 示 。 


2 绘制 形状 单 击 工具 箱 中 
a a ht 
Da la oe 

TE ear ea 
为 1 3 点 1 | 赢 色 为 浅 灰 色 
(RID G2 2 | 
“虚线 ”来 绘制 直线 ， 如 图 国 
国 所 未 。 


图 层 到 
EEC 
正常 * | -不 和 明度 : 100%| ~ 
灸 E: 加 sf 中 自 ”填充 :|0% |- 
@ [中] 盾牌 材 风 3 fr 
@ 效果 
@@ 内 阴影 
@ 图 案 到 加 
@ | 量 ]9| 龟 ] 盾牌 底部 2 友 -< 
四 效果 - 
G 友 回 斩 白 司 徊 


渐变 又 加 

新 变 

混合 模式 (o): 正片 又 底 ~ 回访 色 

不 透明 度 (P): \ 7 % 
:| || D&A®) 
样式 ()， 径 向 ” 回 与 图 层 对 齐名 


角度 (N): | 一 | 0 度 


缩放 全 ): 7 100  % 


| 设置 为 默认 值 | | 复位 为 默认 值 


结构 
混合 模式 人 @): 续 性 减 浅 【添加 了 
不 透明 度 (0): 祥 12 % 
末 色 人 N): * 0 96 
5 | | 
图 素 
方法 (Q@): 和 杀 和 
兰 : 器 居中 但 加 边缘 (G) 
阻塞 (C): 4 0 % 
大 小 (5): 思 s 18 像素 48 
图 案 到 加 
图 案 
温 语 模式 (6): 正常 M 
不 透明 度 (Y): = % 
图 案 : il 加 | 贴 紧 原点 (A) | 
编 有 所 (6): CS 100 % 
站 与 图 层 树 接 (K) 


| 设置 为 默认 值 | | 复位 为 默认 值 


51 


网 
省 
4 
咱 


器 


PAP 类 型 | 回力 了 T 蕊 国 
正常 四 不 东明 度 : |100%| ~ 
包 定 : 加 oA 中 和 ”填充 :|100%| > 
© | ] 
®® [| 中 间 x 
加 效果 
加 内 发 光 


(全 水 F 交 宁 ?hn 


== .og o.m 9 7 


JOS. 


之 1 复制 图 层 选择 “形状 1” 
图 层 ， 按 快捷 键 《XCtr1+J> 复制 
图 屋 ， 选 择 复 制 的 图 层 ， 按 快 
捷 键 Ctrl1+T>， 将 其 缩放 到 合 
适 的 大 小 ， 并 移动 到 合适 的 位 

et em WA, a 
国 所 示 。 


人 8 添加 文字 单 击 工具 箱 中 的 
人 
想 中 条 
“字号 ”等 参数 ， 如 图 国 国 
所 示 。 


之 9 添加 图 层 样式 双击 “文字 ” 
EN 
对 话 框 中 选择 “图 案 营 加 ”和 和 
| 投影 选项， 设置 参数 ， 为 
其 添加 效果 ， 如 图 国 团 
所 示 。 


30 添加 文字 单 击 工具 箱 中 的 
ee 
板 中 设置 文字 的 “字体 ”和 “ 字 
号 ”等 参数 ， 如 图 国 国 所 示 。 


图 案 亚 加 
图 案 
混合 模式 (6): 正常 Md 
不 透明 度 (Y): » 100 % 
图 案 : 加 | 贴 紧 原 点 (A) | 
缩放 (5): 100  % 
v| 与 图 层 树 接 (K) 
投影 
结构 
混合 模式 (6) 正片 又 底 ~ 加 到 
不 透明 度 (D): | % 
角度 (A): | * | 90 度 加 | 使 用 全 局 光 (G) 
距离 D): 全 1 像素 
扩展 Rs > 12 % 
大 小 (S): 35 像素 
| 字符 和 问答 
| Bebas Neue | Regula 
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回 帮 工艺 胃 


*| 不 透明 度 : 100%| 
由 直面 卦 这: 100% 
@@ | 后 形 估 1 拷 风 
鲁 | 后 形 杖 1 
@@ 上 :| 中 间 


归 浆果 


= 


弄 |120 品 3 (自动 
必 度量 标准 “| - | EEIo 


| 法 吾 *| aa | 锐利 


下 |126.12 点 | "| 狂 |( 提 动 
欢度 里 标准 “| 7 | 嗓 ! 


六 | |0% ~ 
tT lo | L100% 
A# lo 点 | 坟 : 本 时 呈 


—* pp i 


St 二 dd 上 上 | | F 


法 | aa |[ 锐利 


evel 
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中风 内 阴影 
3 了 3 1 添加 图 层 样式 双击 “文字 结构 
Ee ess ee ped a tae od ||| se a 2 
对 话 框 中 选择 “内 阴影 "和 “外 有 9: (S50 度 站 全 有 


| 二 
其 添加 效果 ， 如 图 因 园 ba ， 4 四 
所 示 ， 9 
混合 模式 (E): 正常 M 
不 透明 度 (0): 2 一 全 39  % 
杂 色 N): /= 一 ”rr 0 % 
5 [| 
图 素 
方法 (Q@): 杀 和 
扩展 (P): 0 
大 小 (5) 24 像素 


32 文字 变形 使 用 同样 的 方法 
2 SR I er 
项 栏 中 单 击 “ 创 建文 字 变 形 ”， ”| 全。 
在 弹出 的 对 话 框 中 选择 “ 肩 。” 时 


形 ”， 设 置 参 数 ， 如 图 国 国有 < 


Ee | T H F R 上 
弯曲 (B): +5 % 


9 水 平 (H) 垂直 (V) 


ey Ed| 


水 平 扭曲 (0): 0 % 
国 所 示 J UU I Et Pez 
fo 呈 AaaT lw 垂直 扭曲 (E): 0 % 
法 计 ;| aa | 锐利 68| 
颜色 亚 加 
au 
也 3 添加 图 层 样式 双击 “文字 ” 到 
混合 模式 人 6): 强 光 ~ 国 国 


图 层 2 在 强 Mn 的 i 图 层 样 Bi 人 不 透明 度 (D): ea 100 % 
Sl a ME na En ss Rl [本 洽 | 认 香 |】 [化 为 轩 认 秆 
“图 案 奢 加 ”选项 , 设置 参数 ， 


图 案 到 加 
为 其 添加 效果 ， 如 图 四 图 案 
a 温 合 模式 (6): 正常 - 
hie 不 透明 度 V): 一 ZZy 100 ”% 
图 案 : Ee 加 [| 贴 紧 原点 多 | 
缩放 人 G): ”100  % 
可 与 图 层 链接 ( 


也 4 绘制 线条 单 击 工具 箱 中 的 
由 

笔 的 笔触 以 及 其 他 参数 ， 
op 
B® ee 


Pp 型 ?| 国外 TT 品 明 日 
正常 ?| 不 溉 明度: |100%| ~ 
名: 图 sf 中 和 填充 :|100% 


® J] 统 


到 层 | 师 页 面 上 绘 | 线条 A 如 四 | 下 collecoréditional fr = 
I 电 效果 
图 因 四 因 所 示 。 名 颜色 亚 加 
© 本 回 ©. 向 加 闸 
:| 模式 : | 正常 :| 不 要 明度 : [100%| -| 荆 | 世 重 j# 除 区 因 


nl 


35D 添加 文字 单 击 工具 箱 中 的 
人 
板 中 , 设置 文字 的 “字体 ”和 “ 字 
号 ”等 参数 ， 如 图 园 园 所 示 ，。 


了 36 添加 文字 单 击 工具 栏 中 的 
“模版 文字 工具 ”按钮 ， 在 选 
项 栏 中 设置 参数 ， 输 入 文字 ， 
如 图 因 因 国 所 示 。 


了 /添加 内 阴影 双击 “文字 ” 
图 层 ， 在 弹出 的 “图 层 样 式 ” 
对 话 杠 中 选择 “内 阴影 ”选项 ， 
设置 参数 ， 为 其 添加 效果 ， 如 
图 国 国 押 示 。 


了 8 添加 投影 继续 在 “图 层 样 
式 ” 对 话 框 中 选择 “投影 ” 选 
项 ， 设 置 参 数 ， 为 其 添加 效果 ， 
如 图 图 图 所 示 。 


字符 | 段落 2 | 
Bebas Neue 三 Regula 

村 |120 点 -| 纵 |( 自 动 |- 

W | 度 里 标准 |- 0 

六 :|0% 

1T |100% .下 | 100% 

A*#lo 点 | 颜色 : 


TT 7 TT Tr ET 1 于 


[法 晤 ”<|3a | 锐 和 
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回 思 IT|5 男 目 
| 不 滔 明度 : |100%| -| 
证 : 加 of 中 日。 培 充 : [00%] 
区 en king.Mr 
本 | | 线条 
| 正 collecoreditional 
加 效果 
GE 产 . 回 区 了 和 世 性 


『 -| 二 | | 微软 雅 果 | | |Bod ”J |48 点 
内 阴影 

结构 

混合 模式 (6): 正片 到 底 ”加 到 

不 透明 度 (0): 一 z= 一 39  % 


角度 (A): | )120 ” 度 同 使 用 全 局 光 (G) 
距 高 D): /二 一 2 像素 


阳 塞 人 :于 0 % 

大 小 6j: 5 3 像素 
品质 

等 高 线 : [4 消除 据点 (0 

杂 色 NT 一 0 % 


| 设置 为 默认 值 “| | 复位 为 默认 值 | 


投影 
结构 
混合 模式 (6): 亚 加 
不 透明 度 (0): ez 31 % 


角度 (A): | “， ) 120 ” 度 回 使 用 全 局 光 (G) 


距离 {D): 1 像素 


扩展 R): < J 

大 小 (5): < 0 像素 
品质 

等 高 线 : PE 消除 锯 占 ) 

杂 N:C> 0 % 


避 图 层 控 空投 影 (U) 
[设置 为 默认 值 。| | 复位 为 默认 值 


Wi 


4 Ei :|| 圈 和 三 | 思 | 基 
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@ 光 盘 路 径 
Chapter05/Media 


清晰 允 真 的 木 纹 质感 


椭圆 工具 、 横 版 文字 


Level 一 一 一 一 无 论 是 现代 网 站 设计 还 是 复古 网 站 设计 ， 木 纹 元 素 的 使 用 总 是 随处 可 
Ga 见 。 不 管 是 打印 产品 、 界 面 设 计 或 总 体 布 局 ， 木 纹 总 是 能 增强 视 党 效果 和 
CS4 CS5 CS6 CC 冲击 力 。 


本 例 制 作 的 是 本 纹 质感 ， 设 计 师 利用 图 层 样 式 的 登 加 来 绘制 木 纹 质感 背景 ， 再 添加 上 说 
刻字 体 和 图 案 ， 形 成 一 个 略 带 三 维 效果 的 设计 ， 展 现 出 非常 强 的 木质 感 ， 苦 全 在 其 中 还 市 有 
立体 的 光 洋 感 。 


〇 1 打开 文件 执行 “文件 > 打 
开 ” 命 令 ， 在 弹出 的 对 话 框 中 
vn | ere (En 
打开 ， 如 图 贺 加 所 示 。 


(OZ 绘制 国 角 给 形 单 击 工具 箱 
中 前 以 天虹 | HE: p 十 襄 : [1003%| -| 
在 选项 栏 中 选择 工具 模式 为 “ 形 
状 ”， 荐 充 颜 色 为 土 黄色 (R: 
D3 QB A YN lea 
为 4 保 亲 ,在 | 网 面 岂 绘制 
形状 , 将 图 层 名 称 改 为 “底部 ”， 
如 图 国 四 国 所 示 。 


Ei 口 -| 形 尖 || 境 训 有] 描 为 :| 天 | |0.o0 点 “| " | 一 一 省 w [372 像 | G9 H: |276 像 | 国 局 垃 | 业 ”半径 : |4 像 素 E05 | 


ppl 


OO3 添加 描 边 双击 “底部 ”图 
层 ， 在 弹出 的 “图 层 样式 ”对 
话 框 中 选择 “ 描 边 ” 选 项 ， 设 
置 参 数 ， 为 其 添加 效果 ， 如 图 
四 加 所 示 。 


〇 4 添加 内 阴影 继续 在 “图 层 
样式 ”对 话 框 中 选择 “内 阴影 ” 
选项 ， 设 置 参数 ， 为 其 添加 效 
果 ， 如 图 辆 国 所 示 。 


0 〇 5 添加 内 发 光 继续 在 “图 层 
样式 ”对 话 框 中 选择 “内 发 光 ” 
选项 ， 设 置 参数 ， 为 其 添加 效 
果 ， 如 图 四 圆 所 示 . 


0 〇 6 添加 图 案 权 加 继续 在 “图 
层 样式 ”对 话 框 中 选择 “图 案 
登 加 ”选项 ， 设 置 参数 ， 为 其 
添加 效果 ， 如 图 加 困 所 示 。 


7 添加 投影 继续 在 “图 层 样 


式 ”对 话 框 中 选择 “投影 ” 先 
项 ， 设 置 参 数 ， 为 其 添加 效果 ， 


如 多 四 转 所 示 。 


描 边 


结构 


大 小 SG: GC 一 一 1 像素 
位 置 (P):; 外 部 ~ 

混合 模式 (6): 正常 ” 

不 透明 度 (0): = 100 % 


| ”填充 类 型 (FF): 颜色 
ieé: Ol 
一 内 阴影 
结构 
混合 模式 (6): 正常 | 
不 透明 度 (0): 了 91 % 
角度 (A): wy 50 ” 度 回 使 用 全 局 光 (G) 
距离 (0): (一 Fa ”像素 
阻塞 (CQ): 0 % 
大 小 (5): CO 仅 志 
品质 
$8: | | Deiato 
末 色 人 N): CO o6 
设置 为 默认 值 复位 为 默认 值 08 
一 内 发 光 
结构 
混合 模式 @): 涯 色 
不 透明 度 (0): CT 35  % 
杂 色 (N): (一 一 0 oo 
@[ Ol | 
EE 
方法 (Q@): 条 和 ~ 
源 :器 居中 全 回 边缘 (G) 
阻塞 (0): 一 42  % 
去 小 (5): PA 像 喜 
品质 
$s: | -| Cin 
范围 R): 地 550 % 
抖动 QO): (P= 0 oo 
一 图 案 亚 加 
图 案 
人 正常 
图 案 : 避 
缩放 (9): 一 100 % 
辐 | 与 图 层 馆 接 (O 
设置 为 默认 值 复位 为 默认 值 
投影 
结构 
混合 模式 (8) 正片 又 底 -El 


不 透明 度 (0): = 一 一 30  % 
角度 (A): (uy 50 度 加 使 用 全 局 光 (G) 
扩展 QR): CS 0 % 
大 小 5): 四 人 像素 


品质 


等 高 线 : [4 回 湖 所 齿 () 


杂 色 (N): (一 一 一 > 0 % 


gal 
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Photoshop APP UI 设计 从 入 门 到 精通 


8 绘制 矩形 单 击 工具 箱 中 的 于 


a 回回 苑 搬 状 属 性 
66 ,川中 2 六 66 j Sp 
Wh ji i i 人 EEC 区 了 下 


制 形状 ， 如 图 加 加 所 示 。 下 os -ee 
[一 ?[ 医 
0 像素 4 像素 4 像素 0 像素 
口 口 
Dj 
口 lo 像素 “|| 4 像素 ”| 口 
中 
16 
描 边 
09 添加 描 边 双击 “和 矩形 1” 结构 
| ll 大 小 GS): (一 1 ”像素 
图 层 ， 在 弹出 的 “图 层 样式 ” 位 置 p): 外 部 ~ 
对 话 框 中 选择 “ 描 边 ” 选项， aewsm 下 - 
不 透明 度 0): 一 人 % 
ne 
图 因 困 上 所 示 。 靳 六: | | O&A) 
样式 0， 线性 > 团 与 图 层 对 齐 (6) 
角度 (A): (| ) 5 度 ”器 仿 色 
缩放 (CO 一 10 % 
内 阴影 
10 添加 内 阴影 继续 在 “图 层 
Wi 、 ! 混合 模式 (6): 正常 
外 Il 对 话 框 中 选择 i 内 阴影 1 不 透明 度 (0): se 46 oo 
选项 ， 设 置 参 数 ， 为 其 添加 效 。 maw (1) 5 一旦 mesxe 
a 中 高 D: 4 一 一 像素 
果 ， 如 图 困 团 所 示 。 人 
大 小 BS): 0 像素 
品质 
高 线 : [A 口 潮 锯 占 
杂 N: A 0 % 四 
1 1 添加 颜色 要 加 继续 在 “图 
层 样式 ”对 话 框 中 选择 “颜色 一 
从 
a sae dy 混合 模式 (6) 正常 ~ 国 
添加 效果 ， 加 图 园 国 所 示 。 不 透明 度 (0): = > 17 % 
| 设置 为 默认 值 。 [ 复位 为 默认 值 | 
12 添加 渐变 要 加 继续 在 “图 
层 样式 ”对 话 框 中 选择 “渐变 “和 
A J en a 2 A 混合 模式 (0)。 权 加 ” 口 依 
\ NI 四 由 不 透明 度 (P): 二 py 100 % 
添加 效果 ， 如 图 贺 园 所 示 。 ee 
样式 (Dy:， 线性 。 团 与 图 层 对 齐 ( 
角度 (N): (wp 90 度 


编 识 (5): = 100  % 


mad! 


1 3 添加 图 案 杰 加 继续 在 “图 


层 样 式 ” 对 话 框 中 选择 “图 案 _ ah 


图 案 


车 加 ” pa ji 设置 参数 ， pl 混合 模式 (6): 正常 v 
凌 加 效果 ， 如 图 国 团 所 示 。 ER 
| | 司 
缩放 (5): 一 > 100 % 
回 与 图 层 链 接 (0 
Wal | 投影 
和 14 添加 投影 继续 在 “图 层 样 后 
| | 混合 模式 (6) 正常 ~ 国 国 
IE 
项 ， 设 置 参数 ， 为 其 添加 效果 ， 角度 (Vy: (| ) 5 度 回 使 用 全 局 光 人 
如 图 困 困 所 示 。 人 
大 小 (9): CPP 2 像 吉 
品质 
高 线 : PF 回 清 帝 据 齿 () 
杂 色 (N): 人 本 0 3 


人 9 绘制 抢 形 单 击 工具 箱 中 的 加 | 口 苑 才 状 属性 


66 E Sl 煞 ， 下 66 1 3 
ih jo li 几 W: |130 像素 | 名 H: |53 像 素 | 
板 中 设置 参 数 ， 在 页 面 中 绘 x: 六 


[E ?|[ 医 4 
0 像素 4 像素 4 像素 0 像素 
口 口 
Co 
口 四 
四 
16 添加 描 边 双击 “年 形 1” 一 冲 ， 
图 层 ， 在 弹出 的 “图 层 样式 ” era 
位 置 p): 外 部 v 
对 话 框 中 选择 “ 描 边 ”选项 ， 混合 模式 6)， 正常 - 
pa a TT” ” 
届 一 “填充 类 型 F): 颜色 ~ 
图 国 国 上 所 示 . 颜色 : 丽 遇 
/添加 内 阴影 继续 在 “图 层 
样式 ”对 话 框 中 选择 “内 阴影 ” mw 
选项 , 设置 参数 ,为 其 添加 效果 ， 混合 模式 (6) 正常 = 
Wu 不 透明 度 (0): 一 一 46  % 
如 图 图 国 所 示 。 角度 (A): (1) 90 ” 度 园 使 用 全 局 光 (G) 
中 高 D): 一 1 ”像素 
阻塞 (0): (一 0 % 
大 小 8): 一 一 0 像素 


ll 
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18 添加 渐变 要 加 继续 在 “图 
层 样 式 ” 对 话 框 中 选择 “渐变 
登 加 ”选项 ， 设 置 参数 ， 为 其 
添加 效果 ， 如 图 国 国 所 示 。 


1 9 添加 图 案 权 加 继续 在 “图 
层 样式 ”对 话 框 中 选择 “图 案 
登 加 ”选项 ， 设 置 参数 ， 为 其 
添加 效果 ， 如 图 图 国 所 示 。 


人 0 添加 内 发 光 继续 在 “图 层 
样式 ”对 话 框 中 选择 “内 发 光 ” 
选项 ， 设 置 参数 ， 为 其 添加 效 
果 ， 如 图 四 贺 所 示 。 


少 1 复制 图 层 选择 “和 矩形 1” 
图 层 ， 按 快捷 键 <Ctr1+J>， 复 
制图 层 ， 选 择 “ 和 矩形 1 拷贝 ” 
图 层 ， 按 快捷 键 <Ctrl+T>， 将 
图 像 进行 “水 平 翻转 ”并 改变 
大 小 ， 如 图 图 较 所 示 。 


人 2D 添加 投影 双击 “和 矩形 1 找 
贝 ”图 层 , 在 弹出 的 “图 层 样式 ” 
对 话 框 中 重新 设置 投影 的 参数 ， 
改变 效果 ， 如 图 四 园 所 示 。 


Photoshop APP Ul 设计 从 入 门 到 精通 


一 渐变 县 加 

渐变 

混合 模式 (o): 本 加 ~ 回 仿 色 

不 透明 度 P)， 一 10 % 
渐变 ; 回 反 向 fR) 
样式 (1): 线性 ”” 周 与 图 层 对 齐 (0) 


角度 () (up 50 一 讼 


缩 抽 (5): 二 一 一 100 % 
一 图 案 琶 加 
图 案 
混合 模式 (6): 正常 - 


不 透明 度 (Y): 一 100 oo 


缩放 (人 ): 一 100 % 
加 与 图 层 链接 (9 


设置 为 默认 值 复位 为 默认 值 


一 内 发 光 
结构 
混合 模式 (6): 正常 Md 
不 通明 度 (0): 一 一 29  % 
杂 色 (全 ): Pa 90 
_] el | 
图 素 
方法 Q): 柔和 ~ 
源 :器 居中 日 回 边 滞 (G) 
阻塞 人 0): 于 66 % 
大 小 (S): CPP 1 像素 
到 


投影 
结构 


混合 模式 (6): 正常 ~ 国 国 
不 透明 度 (D): 7 18 oo 
角度 :| 上 】 50 度 回 使 用 全 局 光 (G 


扩展 (R): Ce 0 % 
大 小 (5): Cn 2 像 喜 


pal 
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| Mm W: ca H: 
面板 中 设置 参数 ， 在 页 面 中 绘 | 、 人 
制 矩 形 ， 如 图 国 辆 所 示 ， 二 一 

LE LE 


0 像素 4 像素 4 像素 "像素 
口 口 


LoD 


品 lo 像 素 || 4 像素 | 回 
有 


人 4 添加 描 边 双击 “ 算 形 3” 


描 边 


图 层 ， 在 弹出 的 “图 层 样式 ” 二 
| | | | 大 小 8): A 一 一 1 像素 
对 话 框 中 选择 “ 描 边 ”选项 ， 位 置 (P): 外 部 < 
、 | 由 内 3 、 ES 全 全 全 正常 至 
图 图 国 上 所 示 。 一 “填充 类 型 F): 颜色 ~ 
颜色 : B 


一 内 阴影 


人 DD 添加 内 阴影 继续 在 “图 层 结构 
1 


oe Wn, | 2 0 Ay rl os Wl 角度 WW: (| ) 名 度 回 使 用 全 局 光 (G) 
ul 距离 D): 5 一 2 像素 
未 ， 如 图 国 园 历 示 。 i % 


大 小 人 :3 像素 
品质 


高 线 : [A 问 湖 用 据 占 人 


杂 色 (NN): CC 0 % 


之 O 添加 渐变 要 加 继续 在 “图 
层 样式 ”对 话 框 中 选择 “渐变 


和 琶 加 ”选项 ， 设 置 参 数 ， 为 其 混合 模式 (0): Ce ~ 回 仿 色 

| I 中 不 透明 度 (p): 100  % 

添加 效果 ， 如 图 国 国 所 示 。 新 -一 =] 口 反 向 R) 
样式 (0): 性 ”| 贱 与 图 层 对 齐 (0 


角度 :人 ep | 度 
缩放 人 ): = 100  % 


之 / 添加 图 案 要 加 继续 在 “图 
epee Es 
i 2 | ee ; 


添加 效果 ， 如 图 国 国 所 示 。 不 放 明 度 W): 一 py 100 % 
| 可 


缩放 (人 ): 二 T= 一 100 % 
周 与 图 层 榜 接 (K) 


yp 


Photoshop APP UI 设计 从 入 门 到 精通 


2F》 8 添加 内 发 光 继续 在 “图 层 。“"%% 
样式 ”对 话 框 中 选择 “内 发 光 ” i = 


不 透明 度 (0): se 29 


选项 ， 设 置 参数 ， 为 其 添加 效 杂 色 N: 4 一 一 % 
册 | Ol | 
果 ， 如 图 国 国 所 示 。 3 
方法 Q): 柔和 ~ 


源 :器 居中 日 ”加 边 红 (6) 
大 小 (S): (= 1 像素 国 
56 


人 9 添加 文字 单 击 工具 箱 中 的 
“文字 工具 ” 按钮 ， 在“ 字符” 
面板 中 设置 的 字体 、 字 号 、 颜 

| es a a 
图 国 困 所 示 。 


3 添加 颜色 要 加 双击 “文字 ” 

图 层 ， 在 弹出 的 “图 层 样式 ” 本 
i 位 7 混合 模式 (6): 正常 ~ 国 国 
对 话 框 中 选择 “颜色 释 加 ”选项 ，。 生生 -mm 


设置 参数 如 图 团 团 所 示 。 | 


一 外 碌 光 


3 1 添加 外 发 光 继续 在 “图 层 st 
Wi | | th 混合 模式 全): 正常 v 
zl 对 话 框 中 选择 yap 不 透明 度 (0): a 加 %% 


选项 , 设置 参数 ,为 其 添加 效果 ， i 
如 图 国 国 所 示 。 
方法 (Q): 条 和 ~ 


扩展 (P): CP 1 oo 
大 小 (S): 一 6 像素 


品质 


高 线 : PE 回 清 逐 据 齿 () 


范围 (R): C50 a 
拉动 0): (= 0 % 


设置 为 默认 值 复位 为 默认 值 


32 添加 文字 使 用 同样 的 方 
法 ， 制 作 其 他 文字 ， 如 图 国 
围 所 示 。 


pel 
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也 3 绘制 分 割 线 单 击 工具 箱 中 


图 后 
a a 四 工 于 国 
pe WV 不 和 明度 : 100% | " 


绿色 为 由 黄 色 (R:|207,|G: | 议 E: 回 of 中 硬结 :oo | 
161，B: 104) ， 在 页 面 中 绘制 ”| 区? 
形状 ， 将 图 层 名 称 修改 为 “分 
制 线 ”， 如 图 国 园 困 所 示 。 


el 
5 六. 回 仿 . 向 国 亩 


34 添加 投影 双击 “分 割 线 ” 
图 层 ， 在 弹出 的 “图 层 样式 ” 。 一旦 


结构 
对 话 框 中 选择 “投影 ”选项 ， 混合 模式 (8): 正常 
、 v2 ! " 不 透明 度 (0): 于 75 % 
设置 参数 ， 为 其 添加 效果 ， 如 角度 (A): C) 180 一 | 度 回 使 用 全 辐 光 (6) 
| < 
图 国 E 由 所 钞 。 距 高 Di: 9 1 像素 


扩展 PR): = 一 0 % 
大 小 3): Ce 0 像 喜 四 


了 3D 复制 矩形 选择 “矩形 1 
£3 0a 20 
复制 图 层 。 选 择 “ 和 窍 形 1 
拷贝 2” 图 层 ， 按 快捷 键 
RC ome Wt > ea ea NS Ny, 
如 图 贺 因 所 示 。 


了 6 复制 矩形 选择 “和 矩形 2” 
图 层 ， 按 快捷 键 <Ctr1+J> 复制 
图 层 。 选择 “矩形 2 挡 贝 ”图 层 ， 
按 快捷 键 <Ctrl+T> 改变 图像 大 
小 ， 如 图 因 四 所 示 。 0 a © 站 类 Hz 持 风 


i 


HD 产 . 回 省 .各 国 着 


Photoshop APP UI 设计 从 入 门 到 精通 


了 /添加 内 阴影 选择 “ 算 
形 1 找 贝 ” 图 层 ， 按 快捷 键 
《Ctrl+J> 复制 图 层 。 选 择 “ 算 
形 1 找 由 3” 图 层 ， 按 快捷 键 
MO Cm > a NR IN | an | 
因 所 未 。 


了 8 添加 渐变 要 加 选择 “矩形 
BI a RG tol 
复制 图 层 。 选 择 “ 和 矩形 3 撕 贝 ” 
图 层 ， 按 下 快捷 键 《Ctr1+T> 改 
变 图 像 大 小 ， 如 图 园 因 所 示 。 


了 了 39 添加 图 案 要 加 单 击 工具 箱 
中 的 “多 边 形 工具 ”按钮 ， 在 
选项 栏 中 选择 工具 模式 为 “ 形 
状 ”， 边 为 “3”， 之 后 单 击 先 
项 栏 中 的 “设置 ”按钮 ， 在 弹 
出 的 界面 中 取消 勾 选 “ 星 形 ” 


he Rs 
2OT UNG GA Ee OA Nee 


页 面 中 绘制 形状 ， 将 图 层 名 称 
修改 为 “三 角 按钮 ”， 如 图 因 
国 国 所 未 。 


4 0 添加 内 发 光 双击 “三 角 按 
钮 ” 图 层 ， 在 弹出 的 “内 阴影 ” 
对 话 框 中 选择 “ 描 边 ”选项 ， 
设置 参数 ， 为 其 添加 效果 ， 如 
图 图 国 所 示 。 


生生 复制 图 层 继续 在 “图 层 样 
式 ” 对 话 框 中 选择 “颜色 辩 加 ” 
选项 , 设置 参数 ,为 其 添加 效果 ， 
如 图 国 困 所 示 。 


一 内 阴影 


结构 
混合 模式 @): 正片 亚 底 | 
不 透明 度 (QO): 于 31 oo 


前 度 (A): (1) 90 ” 度 回 使 用 全 局 光 (G) 


阻塞 (OC): Pe 0 a 


OU 


大小 (S): (P= 0 像素 
一 颜色 到 加 
颜色 
混合 模式 (6): 正常 ~ 国 国 
不 透明度 (0): 一 45  % 
设置 为 默认 值 复位 为 默认 值 


了 矩形 1 拷 风 3 


© | 局 2 


玉 拭 形 3 拷贝 
© [EH Rin 
a 拭 形 2 拷贝 


人 2 添加 投影 继续 在 “图 层 样 
式 ” 对 话 框 中 选择 “外 发 光 ” 

选项 , 设置 参数 , 为 其 添加 效果 ， 
如 图 国 国 所 示 。 


43 绘制 分 割 线 选择 “三 角 按 
钮 ”图 层 ， 按 快捷 键 <Ctr1+]J> 
复制 图 层 。 选 择 “ 三 角 按 钮 拷 
由 ”图 层 ， 按 快捷 键 《Ctrl1+T> 
将 图 像 进行 “水 平 翻转 ”， 移 
动 到 合适 的 位 置 ， 如 图 国 图 
所 示 。 


4 添加 投影 使 用 上 述 方法 ， 
制作 出 多 个 木 条 效果 按钮 ， 如 
图 四 团 所 示 。 


4 复制 矩形 单 击 工具 箱 中 
的 “ 圆 角 矩形 工具 ”按钮 ， 在 
选项 栏 中 选择 工具 模式 为 “ 形 
状 ”， 半 径 为 “75” 像 素 ， 在 
页 面 中 绘制 形状 ， 在 图 层面 板 
中 设置 图 层 的 “填充 ”为 0%。 
双击 “ 圆 角 矩形 4” 图 层 ， 在 
弹出 的 “图 层 样式 ”对 话 框 中 
选择 “内 阴影 ”选项 , 设置 参数 ， 
为 其 添加 效果 ， 如 图 国 
所 示 。 


4 复制 矩形 继续 在 “图 层 样 
式 ” 对 话 框 中 选择 “颜色 受 加 ” 
选项 ,设置 参数 ,为 其 添加 效果 ， 
如 图 国 国 所 示 。 


一 外 发 光 


结构 


混合 模式 (E): 正常 - 


不 透明 度 (0): = 44  % 
杂 色 (N): CC o6 
| Ol | 

图 过 
方法 Q): 杀 和 
扩展 P): 人 1 % 
大 小 (5): CZ 一 6 像素 


一 内 阴影 


结构 


混合 模式 人 @): 正片 亚 底 
不 透明 度 (0): sa 27 


距离 {DO): QQ 2 
阻塞 (OC): CPs 0 
大 小 (S): Cs 1 


~ 国 国 


% 


角度 A ( |】 6。 度 回合 用 全 局 (6) 


像素 
% 


像素 


一 颜色 又 加 


颜色 


混合 模式 (6): 正常 
不 透明 度 (D): Ps 3 


- 国 国 


% 


设置 为 默认 值 复位 为 默认 值 


do 
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EE 三 角 按 妞 拷贝 


一 一 

oT E 
| 穿 透 :| 不 透明 度 : | 100%| ~ 
钠 定 : 加 sf 中 四 填充 :|100%|] ~ 


生 7 添加 投影 继续 在 “图 层 样 
式 ” 对 话 框 中 选择 “投影 ” 选 
项 ， 设 置 参数 ， 为 其 添加 效果 ， 
如 图 国 困 所 示 。 


8B 更 多 效果 使 用 同样 的 方 
法 ， 再 来 制作 一 个 木 条 效果 
的 滑动 进度 条 ， 如 图 国 
所 示 。 


49 绘制 贺 角 短 形 单 击 工具 箱 
OR WS tt 0 
在 选 现 柱 喇 选择 而 具 株式 六 
“形状 ”， 颜 色 为 土 黄色 〈R: 
207 os Ge Oa 
ps 0 0 2 a Da es 
形状 ， 如 图 加 器 所 示 。 


D O 添加 描 边 双击 “ 圆 角 矩形 
6” 图 层 , 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “ 描 边 ”选项 ， 
设置 参数 ， 为 其 添加 效果 ， 如 
图 四 四 所 示 。 


D 添加 内 阴影 继续 在 “图 层 
样式 ”对 话 框 中 选择 “内 阴影 ” 
选项 , 设置 参数 , 为 其 添加 效果 ， 
如 图 加 加 所 示 。 


Photoshop APP UI 设计 从 入 门 到 精通 


投影 


结构 


混合 模式 (6): 正常 ~ 
不 透明 度 (0): se 46 % 


/2 


角度 (A): wp 50 ” 度 回 使 用 全 局 光 (G) 


扩展 R): 二 wy 100 % 
大 小 (5): Pa 像素 


描 边 


下 


铁定 : 加 A 中 国 填充 :|[o% | -| 


蝙 3 圆 角 拒 形 5 
@ 效果 
@ 内 阴影 
@@ 产 色 要 加 


LER。 | i 00] -| 
铁证 : 四 oA 中 和 填充 : |100%| | 


龟 内 阴影 
龟 颜色 到 加 


- 


结构 


大 小 5): GT |] 像素 
位 置 Pp): 外 部 

混合 模式 人 6): 正常 M 

不 透明 度 (0): sz 87  % 


”填充 类 型 F): 颜色 ~ 


一 内 阴影 


产 色 : 国 国 


结构 


混合 模式 人 @@): 正常 
不 透明 度 DO， se 人 
角度 (A): (uy, 50 ” 度 加 使 用 全 局 光 (G) 


阻塞 (0): (一 =* 0 %% 
大 小 (9): (= 0 像素 


品质 


等 高 线 : PE 可 注 逐 据 齿 人 


杂 色 (N): (= 0 % 


ool 


DZ 添加 内 发 光 继续 在 “图 层 
样式 ”对 话 框 中 选择 “内 发 光 ” 
选项 , 设置 参数 , 为 其 添加 效果 ， 
如 图 四 图 所 示 。 


D 添加 渐变 要 加 继续 在 “图 
层 样 式 ” 对 话 框 中 选择 “渐变 
登 加 ”和 选项， 设置 参数 ， 为 其 
添加 效 末 ， 如 图 图 加 所 示 。 


D4 添加 图 案 到 加 继续 在 “图 
层 样 式 ” 对 话 框 中 选择 “图 案 
登 加 ”选项 ， 设 置 参 数 ， 为 其 
添加 效果 ， 如 图 贺 加 所 示 。 


DD 绘制 圆 形 单 击 工具 箱 中 的 
“ 顶 圆 工具 ” 按钮， 在 选项 栏 
Pha 和 

Pn me 22 OW 2 

284D) ye fa Sah > | ee 
面 中 绘制 正 圆 ， 如 图 轿 
DE 


D 添加 渐变 到 加 双击 “ 椭 加 
1” 图 层 , 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “渐变 闭 加 ” 选 
项 ， 设 置 参 数 ， 为 其 添加 效果 ， 
如 图 国 园 所 示 。 


一 内 寡 光 


结构 
混合 模式 6): 正常 加 
不 透明 度 (0): = 29  % 

杂 色 人 N): Ce 0 % 


©@[ el | 


[过 | 
图 素 


方法 (Q): 杀 和 
源 :器 居中 但) 回 边缘 (G) 
阻塞 (C0): CT 66  % 


一 渐变 到 加 


大 小 (5): CC 1 像素 107 


渐变 


混合 模式 (0): 亚 加 ~ 回访 色 

不 透明 度 (P): sz 100 % 
新 变 : 同 反 向 R) 
样式 (LD): 线性 ~ ” 团 与 图 层 对 齐 (1) 


角度 (N): (wy 90 度 


缩放 人 ): = 100 % 109 


一 图 案 严 加 


图 案 
混合 模式 人 @@): 正常 
不 透明 度 (Y): 2》 100 oo 


缩放 (人 ): 一 7 一 一 > 100  % 
回 | 与 图 层 链 接 () 


一 渐变 又 加 
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渐变 


混合 模式 (0): 正常 ~ 回访 色 

不 透明 度 P): = Ta |% 
新 变 : 回 反 向 fR) 
样式 (): 角度 ~ 园 与 图 层 对 齐 们 


角度 (N): (1) 区 讼 


缩放 (5): 一 一 一 一 一 100  % 


oR! 


dls 


图 层 
PP 型 ?| 国名 荆 口 明 日 
党。 。。 :| 二 明度 : [00%| 
锁定 : 团 oA 中 BB ”填充 : |100%| -| 


和 
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D / 添加 斜面 和 浮雕 继续 在 
“图 层 样式 ” 对话 框 中 选择 “和 斜 
面 和 浮雕 ”选项 ,设置 参数 ， 
为 其 添加 效果 ， 如 图 加 
所 示 ，。 


D8 添加 描 边 继续 在 “图 层 样 
式 ” 对 话 框 中 选择 “ 描 边 ” 选 
项 ， 设 置 参数 ， 为 其 添加 效果 ， 
如 多 加 甘 所 示 。 


上 D9 添加 投影 继续 在 “图 层 样 
式 ” 对 话 框 中 选择 “投影 ” 选 
项 ， 设 置 参数 ， 为 其 添加 效果 ， 
如 图 贺 图 所 示 。 


0 给 制 酉 圆 单 击 工具 箱 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 模式 为 “形状 ”， 
赢 色 为 土 黄 色 (CR: 207，6: 
WG Le OD aD woh at SS ni o> 
键 ， 在 页 面 中 绘制 正 圆 ， 如 图 
加 所 示 . 


人 1 添加 渐变 到 加 双击 “椭圆 
2” 图 层 , 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “渐变 夺 加 ” 选 
项 ， 设 置 参数 ， 为 其 添加 效果 ， 
如 图 回 国 所 示 。 


一 斜面 和 浮雕 
结构 
样式 (0): 内 斜面 了 
方法 (9): 平滑 ~ 
方向 :加 上 OF 下 
大 小 (D): Eee | 4 像素 
软化 中 :GT 0 像素 
阴影 
角度 NW: 50 度 
(“回合 用 全 局 x(9) 
高 度 : 一 30 避 
FS: | "| Datit) 
高 光 模 式 (H): 滤 色 ~ | 
不 透明 度 (0): 于 75 % 
阴影 模式 (A): 正片 到底 ~ 国 国 
不 透明 度 (C): = 68 % 117 


描 边 


结构 


大 小 S: 一 一 1 像素 
位 置 p): 外 部 ~ 

混合 模式 (6) 正常 ~ 

不 透明 度 (0): 59 % 


填充 类 型 F) 颜色 ~ 
颜色 : 国 国 


投影 


结构 


混合 模式 (6): 正常 ~ 国 国 
不 透明 度 (0): 一 2 一 22  % 
角度 (A): (ep 50 ” 度 团 使 用 全 局 光 (6) 


扩展 (R): (FP 0 9 
大 小 (BS): 一 = 2 像素 


一 渐变 又 加 


| | 


灸 证: 四 A 中 日 境 充 : [100%] -| 


和 

e | J 和 | 
e [5 局 病 | 到- 
@ ||- 同 贺 角 息 f6 


渐变 


温 语 模式 (0): 亚 加 v 回 仿 色 
不 透明 度 (P): ss 100 % 
渐变 : Cuan un 
样式 (): 线性 
角度 (N): ( | 人 90 度 
- 
缩放 人): = 100 % 


~ 加 与 图 层 对 弃 钊 


出 | 


125 


DD 


2 添加 描 边 继续 在 “图 层 样 
式 ” 对 话 框 中 选择 “ 描 边 ” 选 
项 ， 设 置 参数 ， 为 其 添加 效果 ， 
如 图 加 图 所 示 。 


3 添加 渐变 要 加 继续 在 “图 
层 样 式 ” 对 话 框 中 选择 “颜色 
阁 轴 wi 入 各 佐 准 川 罗 于 
添加 效果 ， 如 图 图 圆 所 示 。 


4 添加 图 案 要 加 继续 在 “图 
层 样式 ”对 话 框 中 选择 “图 案 
ee We | en 2 2 
添加 效果 ， 如 图 贺 蔽 所 示 。 


OD 添加 投影 继续 在 “图 层 样 
oe nt es 
项 ， 设 置 参数 ， 为 其 添加 效果 ， 
如 图 国 贺 上 所 示 。 


6 绘制 椭圆 单 击 工具 箱 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 模式 为 “形状 ”， 
颜色 为 灰色 (CR: 207，G: 
LG OA ea Sn > 
键 ， 在 页 面 中 绘制 正 圆 ， 如 图 
国 所 示 . 


拉 边 


结构 


大 小 5): = 一 1 像素 
位 置 p): 外 部 ~ 

混合 模式 @): 正常 - 

不 透明 度 (0): s 3 87  % 


填充 类 型 (F)， 渐变 ~ 


:|| DRA) 
样式 (): 线性 ~ 团 与 图 层 对 齐 (6) 


角度 (A): ( | ) 50 度 回信 色 
"i 
缩放 (CO): 二 一 一 ”100 % 


一 颜色 爱 加 


颜色 


混合 模式 @): 正常 ~ 国 国 
不 透明 度 (0): ss > 17 % 


设置 为 默认 值 复位 为 默认 值 


一 图 案 秋 加 


图 案 
混合 模式 人 @@): 正常 > 
不 透明 度 (Y): i oo 


缩放 (5S): Ej» 100 oo 
| 与 图 层 返 接 ( 


投影 


结构 


混合 模式 (8) 正常 ~ 国 国 
不 透明 度 (0): = 18 % 
角度 (A): | !) 90 度 回 使 用 全 局 光 (G) 
ww 


扩展 QR): C= 一 0 % 
大 小 (S): Pi 像 吉 


133 
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钢 E: 回 of 中 日 培训: [100%]-] 


EE 


7 添加 描 边 双击 “椭圆 3” 
图 层 ， 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “ 描 边 ”选项 ， 

设置 参数 ， 为 其 添加 效果 ， 如 
图 圆 咽 所 示 . 


8 添加 内 阴影 继续 在 “图 层 
样式 ”对 话 框 中 选择 “内 阴影 ” 
选项 ， 设 置 参数 ， 为 其 添加 效 
果 ， 如 图 图 欧 所 示 。 


9 添加 内 发 光 继续 在 “图 层 
样式 ”对 话 框 中 选择 “内 发 光 ” 
选项 ， 设 置 参数 ， 为 其 添加 效 
果 ， 如 图 加 四 所 示 。 


了 0 添加 渐变 要 加 继续 在 “图 
层 样 式 ” 对 话 框 中 选择 “渐变 
欠 加 ”选项 ， 设 置 参数 ， 为 其 
添加 效果 ， 如 图 回 加 所 示 。 


7 人 添加 图 案 要 加 继续 在 “图 
层 样式 ”对 话 框 中 选择 “渐变 
登 加 ”选项 ， 设 置 参数 ， 为 其 
添加 效果 ， 如 图 图 图 所 示 。 


Photoshop APP UI 设计 从 入 门 到 精通 


描 边 


结构 
大 小 GS): CF 一 一 1 像素 
位 置 p): 外 部 ~ 

混合 模式 (6): 正常 > 

不 透明 度 (0): = 8387  % 


一 ”填充 类 型 FF): 颜色 ~ 


疡 e: Ol 
137 
一 内 阴影 
结构 
温 合 模式 (6): 正常 > _| 
不 透明 度 (0): 46  % 
角度 (A): (ep 90 ” 度 加 使 用 全 局 光 (G) 
阻塞 (OC): (== 0 op 
大 小 (9): C= 0 俐 过 
品质 
$s: | A-| sin 
一 内 发 光 
结构 
混合 模式 介 ): 正常 
不 透明 度 (0): = 29  % 
杂 色 NG 人 0 % 
| Ol | 
图 素 
方法 (Q): 杀 和 
源 :加 居中 介 ”加 边缘 (G) 
阻塞 (0): 一 = 66  % 
大 小 (5): CPP 1 像 喜 141 


一 渐变 琶 加 


渐变 

混合 模式 (DO): 严 加 回 仿 色 

不 透明 度 P 站 ZJ 100 % 
渐变 ; 辐 反 向 (R) 
样式 (QD): 线性 7 ”| 贱 与 图 层 对 齐 (0D) 
角度 NW): [上 1 50 度 

) 

缩放 (5): 一 100 % 


143 


一 图 案 又 加 
图 案 
混合 模式 (6): 正常 ~ 

不 透明 度 (Y): 一 100 o0 


图 案 : 加 ”| 贴 虹 原点 (A) 


缩放 人 ): = 100 % 
加 与 图 层 链接 ( 改 


设置 为 默认 值 复位 为 默认 值 


8 他 


了 2 添加 内 阴影 单 击 工 具 箱 中 
的 “椭圆 工具 ”按钮 ， 在 选项 
ee ow de A bb 
fo fe A ro ro ea er hn TH hs 
制 正 圆 ， 在 “图 层面 板 ” 中 设 
置 填 充 为 06。 双击“ 椭圆 4” 
图 层 ， 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “内 阴影 ”选项 ， 
设置 参数 ， 为 其 添加 效果 ， 如 
图 贺 图 贺 所 示 ， 


了 3 添加 颜色 要 加 继续 在 “图 
层 样式 ”对 话 框 中 选择 “颜色 
登 加 ”选项 ， 设 置 参 数 ， 为 其 
添加 效果 ， 如 图 加 加 所 示 。 


7 4 添加 投影 继续 在 “图 层 样 


式 ” 对 话 框 中 选择 “投影 ” 选 
项 ， 设 置 参 数 ， 为 其 添加 效果 ， 


如 图 加 医 所 示 。 


了 D9 完成 作品 使 用 同样 的 方 
法 ， 制 作 其 他 效果 ， 最 终 效 果 
如 图 萝 吃 所 示 。 


一 内 阴影 


结构 = 
混合 模式 (6): 正片 亚 底 ~ 国 国 
不 透明 度 (0): 一” 52 % 


角度 :| 】55 。 度 回合 用 全 局 X(6) 


距 高 D): 人 1 像素 
阻塞 (0): Ce 0 % 
了 中 \(S): CC 像 喜 


一 颜色 登 加 


颜色 


混合 模式 B): 正常 ~ 国 国 
不 透明 度 (0): = 一 一 8 % 


设置 为 默认 值 」 | 复位 为 默认 值 
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投影 


结构 

混合 模式 @): 正常 -| | 

不 透明 度 (0): 9 46 % 
角度 0: (|) 55。 度 回 使用 全 局 光 人 9 
中 高 Dj: 下 像素 


扩展 (R): EN 100 o0 
大 小 (5): CCP 1 仅 壶 


图 后 
四 Ta 


ol 


:四 Pel 各 We jm ra 
Wi i had 


Photoshop APP UI 设计 从 入 门 到 精通 


@ 光盘 路 径 


Chapter05/Media 


[1 
BA 


ay 
WwW J 


工具 


Level 一 -一 -一 纸箱 是 当前 应 用 最 广泛 的 包装 制品 ， 它 的 特点 是 质感 厚重 却 又 轻巧 
» 便于 携带 。 它 特有 的 颜色 和 质感 使 其 个 性 鲜明 ， 容 易 营 造 出 沉稳 、 踏 实 
CS4 CS5 CS6 CC 的 氛围 。 


设计 师 以 纸箱 素材 做 背景 ， 选 择 与 纸箱 颜色 相近 的 土 贡 色 绘制 图 标 ， 利 用 图 层 样 式 制 作 
出 立体 的 纸箱 质感 按钮 。 多 样 的 按钮 造型 设计 使 界面 看 起 来 多 样 化 义 不 失 沉稳 ， 很 好 地 利用 
了 纸箱 的 质感 特点 。 


Ce ”一 
sa。 lel [ws 5 


〇 1 打开 文件 执行 “文件 > 打 
开 ” 命 令 ， 在 弹出 的 对 话 框 中 ， 
选择 “站 景 素材 趾 pbg” 素 材 ， 
将 其 打开 ， 如 图 加 加 所 示 。 

01 | 
〇 2 绘制 回 角 矩形 单 击 工具 箱 让 E 
中 的 “ 圆 角 矩形 工具 ”按钮 ， 
在 选项 栏 中 选择 工具 模式 为 a Ml | 
“形状 ”， 颜 色 为 土 黄色 (R; 
loo oes BG OW A 时 
为 “3 像素 ”， 在 页 面 上 绘制 
形状 ， 如 图 辆 四 辆 所 示 。 i ©. EE 


让 -|[ 歼 “| 节 : 夯 岗 :EJoo 点 | -| [一 :六 [52 伍 69 H: 名 全 | 日 尼 井 | 新、 # 和 :6 人 表 ] 口 双 


Pa 到 :| 回 @ TISg 四 
EE 党 :| 禄 出 :oow[ | 
谈 E: 团 上 中 国 填充 :|100%| | 


lao 


(3 添加 斜面 和 浮雕 双击 “加 
角 矩 形 1” 图 层 ， 在 弹出 的 “图 
层 样 式 ” 对 话 框 中 选择 “斜面 
和 浮雕 ”选项 ， 设 置 参数 ， 为 
其 添加 效果 ， 如 图 国 贺 所 示 。 


〇 4 添加 内 阴影 继续 在 “图 层 
样式 ”对 话 框 中 选择 “内 阴影 ” 
选项 ， 设 置 参数 ， 为 其 添加 效 
果 ， 如 图 国 国 所 示 。 


〇 5 添加 渐变 要 加 继续 在 “图 
层 样 式 ” 对 话 框 中 选择 “渐变 
疱 加 ”选项 ， 设 置 参数 ， 为 其 
添加 效果 ， 如 图 四 国 所 示 。 


0 〇 6 添加 投影 继续 在 “图 层 样 
式 ” 对 话 框 中 选择 “投影 ” 选 
项 ， 设 置 参 数 ， 为 其 添加 效果 ， 
如 图 因 转 所 示 。 


0 〇 7 给 制 短 形 影 单 击 工具 箱 中 
Ss a sa 
ps pe 0 0s 
损人 eR dm, G: 
O20 :6 2 hee hal Tem lin 2 et 
形状 ， 将 图 层 名 称 修改 为 “分 制 
线 ”，“ 图 层 ” 面 板 中 设置 填充 
为 80%， 如 图 四 困 所 示 。 


一 和 斜面 和 浮雕 


一 内 阴影 


结构 

温 合 模式 (6): 县 加 ” 

不 透明 度 (0): 一 60  % 
角度 (A): (4) 50 。 度 回 使 用 全 局 光 (G) 
阻塞 (C): (== 0 及 
大 小 (S): CC 1 像素 


一 渐变 又 加 


渐变 


混合 模式 (0): 亚 加 ~ 回访 色 
不 透明 度 P): AT 10 % 
潭 变 [  “]v| 回 反 向 R) 
样式 (): 线性 
角度 (N): \ ! py 90 度 
缩放 ()， = 10  % 


”| 中 与 图 层 对 齐 们 


设置 为 默认 值 复位 为 默认 值 


投影 


结构 


混合 模式 (6):， 柔 光 ~ 国 国 
不 透明 度 (D): 一 一 60  % 
角度 (A): 6 50 度 回 使 用 全 局 光 (G) 


扩展 QR): CS 0 % 
大 小 人 Te 0 像素 


-89- 
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结构 
样式 (): 外 和 斜面 ~ 
方法 (Q): 平滑 ” 
深度 D0): 全 100 % 
方向 : @ 上 OF 下 
大 小 (Z): 一 4 像素 
阴影 
角度 (NV): 一 90 度 
\ i 使 用 全 局 光 (G) 
高 度 ~” 30 度 
光泽 等 高 线 : [A 本 水 饥 可 
高 光 模式 0): 要 加 vv 
不 透明 度 (D): 一 CT 30  % 
阴影 模式 (A): 本 加 ~ 国 国 
不 透明 度 (O): 一 = 一 40  % [9 二 
10 Eee 


Photoshop APP UI 设计 从 入 门 到 精通 


8 添加 投影 双击 “分 割 线 ” 
图 层 ， 在 弹出 的 “图 层 样式 ” 一 ss， 
对 话 框 中 选择 “投影 ”选项 ， 溉 全 术 t 天 -[ 


不 透明 度 (0): 一 yg 80 % 


议 | 区 数 i 为 其 涛 有 效 条 i 如 角度 (A): (SS 0 度 加 | 使 用 全 局 光 (G) 
ww 
图 因 国 所 不 9 中 高 DO): (于 | 像素 


扩展 R): C= 0 % 
大 小 (5): (一 0 像素 四 
16 


0 〇 9 复制 图 层 选择 “ 分割 
线 ” 图 层 ， 连 续 两 次 按 快捷 键 
《Ctrl+]>， 将 图 层 复制 两 次 ， 
如 图 国 因 所 示 。 


10 更 多 效果 使 用 同样 的 方 
法 ， 制 作出 其 他 分 割 线 ， 如 图 


团 所 示 . i 


BE: E 
3 


G yx. 回 促 . 和 名 国 着 


1 11 给 制 矩形 单 击 工具 箱 中 的 
1 者 形 咒 届 几 权 日 册 三 园 顺民 
人 
颜色 为 土 黄 色 (R: 142，6: 
9 Bas at mh he 交 放生 
状 ， 在 “图 层 ” 面 板 中 设置 填 
序 为 80%， 如 图 园 国 所 示 。 


12 添加 内 阴影 双击 “ 乍 形 1” 
国 属 避让 于 


、 swe 局 3; 、、 混合 模式 (6): 和 柔 光 至 区 到 
对 话 框 中 选择 内 肯 影 选项 》 不 透明 度 (o); 一 "nm 攻 
设置 参数 ， 为 其 添加 效果 ， 如 角度 0: (| 56。 度 中 使 有 全 局 光 人 
i 距离 [0): (一 2 像素 
图 团 困 所 a 阳 塞 O: = 0  % 
大 小 8): 一 一 4 像素 


uo 


中 ” 
EGR 2 1 


13 添加 内 发 光 继续 在 “图 层 
样式 ”对 话 框 中 选择 “内 发 光 ” 
选项 ， 设 置 参数 ， 为 其 添加 效 
果 ， 如 图 园 园 所 示 。 


1 4 添加 渐变 要 加 继续 在 “图 
层 样式 ”对 话 框 中 选择 “渐变 
登 加 ”选项 ， 设 置 参 数 ， 为 其 
次 加 效果 ， 如 图 图 困 所 示 。 


15 绘制 矩形 单 击 工具 箱 中 的 
钢 色 加 四 放生 下 个 光 出 风 让 
em 
pn ol sf (R142, 60: 
QO BE D0 A a rE 2 
形状 ， 在 “图 层 ” 面 板 中 设置 
填充 为 80%， 如 图 国 团 所 示 。 


16 添加 内 阴影 双击 “形状 1” 
图 层 ， 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “内 阴影 ”选项 ， 
设置 参数 ， 为 其 添加 效果 ， 如 
图 图 国 所 示 。 


7 添加 内 发 光 继续 在 “图 层 
样式 ”对 话 框 中 选择 “内 发 光 ” 
选项 ,设置 参数 ,为 其 添加 效果 ， 
如 图 图 国 所 示 。 


一 内 发光 


结构 


混合 模式 (6): 亚 加 > 

不 透明 度 (O): AT oo 
杂 色 (人 N): CP 0 oo 
© 图 o 


图 素 
方法 (Q): 柔和 ~ 
源 :加 居中 人 E) 回 边缘 (G) 
阻塞 (0): CC 0 % 
大 小 9): > 13 像素 


一 渐变 又 加 


渐变 


混合 模式 (D): 戏 尖 v 回 仿 色 
不 透明 度 P): AS 10  % 
六 去: | [反问 (R) 
样式 (0D): 线性 v 回 与 图 层 对 齐 钊 
EM 人 
“本 
缩 肌 (5): =” 10  % 


一 内 阴影 


结构 
混合 模式 (6): 对 光 -Em 
不 透明 度 (D): = 100 oo 


角度 (A): ( 上 ) 50 度 回 使 用 全 局 光 (G) 


- 
距 高 D): 2 像素 
阻塞 :CC 0 % 

大 小 (S): 2 4 像素 


一 内 农 光 


结构 


混合 模式 6): 又 加 ~ 
不 透明 度 (0): T= 一 一 0  % 
杂 色 (N): (一 0 wo 


so 图， 


图 素 


方法 (Q@): 杀 和 ~ 

产 :加 居中 人 €) ” 回 边缘 (G) 
阻塞 (OC): ee 0 9% 
大 小 8): 一 一 13 像素 


上 四 
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18 添加 渐变 要 加 继续 在 “图 
层 样式 ”对 话 框 中 选择 “渐变 
登 加 ”选项 ， 设 置 参 数 ， 为 其 
添加 效果 ， 如 图 国 国 所 示 。 


19 添加 投影 继续 在 “图 层 样 
式 ” 对 话 框 中 选择 “投影 ” 选 
项 ， 设 置 参数 ， 为 其 添加 效果 ， 
如 图 困 国 所 示 。 


20 更 多 形状 使 用 同样 的 方 
法 ， 制 作出 其 他 形状 ， 如 图 四 
国 所 示 。 


之 1 弘 制 国 角 短 形 单 击 工具 箱 
中 的 “ 圆 角 和 矩形 工具 ”按钮 ， 
在 选项 栏 中 选择 工具 模式 为 
i Re 


| 
IE i 


绘制 形状 ， 在 “图 层 ” 面 板 
中 设置 填充 为 80%， 如 图 四 
轿 所 示 。 


之 2 添加 内 阴影 双击 “ 贺 角 算 
形 ” 图 层 , 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “内 阴影 ”选项 ， 
设置 参数 ， 为 其 添加 效果 ， 如 
图 四 辆 所 示 ，。 


Photoshop APP U1 设计 从 入 门 到 精通 


一 渐变 琶 加 


渐变 
混合 模式 (0): 和 柔 光 v 回 仿 色 
不 透明 度 (P): AS 10  % 
六 朗 : [| 门 反 向 () 
样式 (0): 线性 
前 度 (N): ( | 人 90 度 
性 
稼 放 ():， 地 gs 一 一 人 S100 % 


”与 图 层 对 齐 人 D 


投影 


结构 


混合 模式 6): 要 加 ~ 
不 透明 度 (0): 一 一 0  % 
角度 (A): (! 50 ” 度 回 使 用 全 局 光 (G) 


扩展 Re 0 % 
大 小 (S): Ce 像素 


一 内 阴影 


结构 


混合 模式 @): 柔 光 -En 
不 透明 度 (O): 人 100 oo 
负 度 (A): | 上】 5 度 回合 用 全 局 光 (G 
i 
阻塞 (C): Pe 0 o0 
大 小 (S): mS 4 像素 


op 


人 3 添加 内 发 光 继续 在 “图 层 
样式 ”对 话 框 中 选择 “内 发 光 ” 
选项 ， 设 置 参数 ， 为 其 添加 效 
条 ， 如 图 图 贺 所 示 。 


之 4 添加 渐变 要 加 继续 在 “图 
层 样式 ”对 话 框 中 选择 “渐变 
营 加 ”选项 ， 设 置 参数 ， 为 其 
添加 效果 ， 如 图 图 困 所 示 ， 


2D 添加 投影 继续 在 “图 层 样 
式 ” 对 话 框 中 选择 “投影 ” 选 
项 ， 设 置 参 数 ， 为 其 添加 效果 ， 
如 图 国 国 所 示 。 


26 更 多 形状 使 用 同样 的 方 
法 ， 制 作出 其 他 形状 ， 如 图 国 
国 所 示 。 


2 了 绘制 椭圆 单 击 工具 箱 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
pee 0 A i 

颜色 为 土 黄 色 (R: 199，6G: 

员 OO A nn fy> 
键 ， 在 页 面 上 绘制 正 圆 形状 ， 

如 图 国 国 所 示 。 


一 内 发 光 
结构 
混合 模式 (6):” 要 加 ~ 
不 透明 度 (0): 10  % 
杂 色 (N): (= 也 0 = 
© 图 © me | | 
图 素 
方法 (Q); 柔和 ”> 
源 : 同居 中 人 E) ” 加 边缘 (6) 
阳 塞 CO: CT 0  % 
大 小 8): 13 像素 


一 靳 变 杰 加 

渐变 

混合 模式 (0): 柔 光 ~ 癌 访 色 

不 透明 度 P): 一 一 0 % 
浙 交 [有 | 一 | [| 反 向 (R) 
样式 LD): 线性 ~ ”加 与 图 层 对 齐 (0 


角度 (N): (国内 90 度 
、 


缩放 (5): oO 100 oo 


设置 为 默认 值 复位 为 默认 值 


投影 
结构 - 


混合 模式 6): 要 加 本 
不 透明 度 (0): 一 z= 一 一 0  % 


角度 (A): (| “) 50 一 度 回 使 用 全 局 光 (G) 
“4 


扩展 R): 一 一 > 0 % 
大 小 (S): < 一 1 像素 团 
50 


上 0 
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oTH 
i 


Ga i 训导 


之 8 添加 斜面 和 浮雕 双击 “ 杭 
圆 1” 图 层 ， 在 弹出 的 “图 层 
样式 ”对 话 框 中 选择 “斜面 和 
浮雕 ”选项 ， 设 置 参数 ， 为 其 
添加 效果 ， 如 图 国 国 所 示 。 


依 9 添加 内 阴影 继续 在 “图 层 
尾 动 让 对 语 眶 中选 择 , 内 了 关 影 ” 
选项 ， 设 置 参数 ， 为 其 添加 效 
果 ， 如 图 国 国 所 示 。 


了 3 添加 渐变 要 加 继续 在 “图 
层 样式 ”对 话 框 中 选择 “渐变 
去 加 ”选项 ， 设 置 参 数 ， 为 其 
添加 效果 ， 如 图 国 国 所 示 。 


也 添加 投影 继续 在 “图 层 样 
式 ” 对 话 框 中 选择 “投影 ” 选 
项 ， 设 置 参数 ， 为 其 添加 效果 ， 
如 图 贺 国 所 示 。 


也 2 绘制 椭圆 使 用 同样 的 方 
法 ,制作 出 另 一 个 圆 形 ， 在 “图 
层 ” 面 板 中 设置 “椭圆 2” 的 填 
充 为 20%， 如 图 国 国 所 示 。 


Photoshop APP Ul 设计 从 入 门 到 精通 


一 射 面 和 浮雕 
结构 
样式 (TD): 外 斜面 
方法 (Q): 平滑 MM 
深度 D): 字 一 一 1100 % 
ND:@L OF 
大 小 (Z): 0 4 像 喜 
阴影 
角度 (N): a 0 度 
ey J 加 | 使 用 全 局 光 (G) 
高 度 : 一 30 度 
光泽 等 高 线 : [A 可 消 作 多 频 员 
高 光 模 式 (H): 要 加 ~ 
不 透明 度 (0): = 30 % 
阴影 模式 (A): 要 加 ~ 国 国 
不 透明 度 (C): 2 一 他 40  % 
一 内 阴影 
结构 
混合 模式 (6): 全 加 | | 


度 A: (SY) 页 
上 区 


不 透明 度 D): 于 60  % 
度 加 | 使 用 全 局 光 (G) 


阻塞 (C): 有 = 0 


% 


大 小 后): Ce | 1 像素 
一 渐变 琶 加 
渐变 
混合 模式 (0): 县 加 7 回访 色 


不 透明 度 (P): > 10 % 


法: [| 回 反射 风 


样式 (0): 线性 


~ 辐 与 图 层 对 弃 锯 


角度 M: 人 内 去 一 讼 
BB、 


缩放 (5): 一 一 一 一 100  % 


投影 


角度 (A): (wp 90 
距离 0): = 5 
扩展 (R): CP 0 


大 中 \(S): 了 一 10 


结构 
混合 模式 人 6): 敢 光 回归 
不 透明 度 (0): ”> 60 % 


度 回 ] 使 用 全 局 光 (G) 


像素 
% 


像素 


国名 


下 后 
四 oTS 


TE 


锁定 : 田 A 中 国 填充 :|20% | ”| 


i 
[Nj 
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33 更 多 形状 使 用 同样 的 方 
法 ， 制 作出 其 他 形状 ， 如 图 国 
国 所 示 。 


轩 层 

加 TO 一 日 
A 
谈 E: 回 ww 中 四 填充 : |100%| > | 


此 
@ | 己 加 和 is 癌 _ 


人 
@ | 三山 圆 4 拷贝 友 > 


了 4 添加 文字 单 击 工具 箱 中 的 se 
“模版 太子 十 具 ” 按 乌 在 选 Rl 
项 栏 中 设置 文字 的 字体 为 “ 微 谱写 : 加 </ 中 四 境 充 :|eo% | >] 
和 a A 
Du ta yy iC Re Oa 9 
40), 在 页 面 上 输入 文字 , 在 “图 
层 ” 面 板 中 设置 填充 为 80%， 
如 图 国 国 所 示 。 


也 D 添加 内 阴影 双击 文字 图 
和 
话 框 中 选择 “内 阴影 ”选项 ， 混合 模式 (3)， 季 光 - El 
不 透明 度 (0): =  % 
“三 于 会 Ni ~ = 本 入 四 
设置 参数 ， 为 其 添加 效果 ， 如 EN (1 页 一度 局 Xi 
图 四 园 所 示 。 中 高 D): 一 2 ”像素 
阻塞 (0): Ce 0 % 
大 小 (5): 9 4 像素 


内 发光 
了 6 添加 夫 发 光 继续 在 “图 层 ”人 
lil | ! 册 混合 模式 @， 亚 加 
样式 ”对 话 框 中 选择 “内 发 光 ” 不 通明 度 (0): 一 1 % 
、 、 "J 、 y LN 杂 色 (N): 
选项 , 设置 参数 ,为 其 添加 效果 ， | em“ 
如 图 因 因 所 示 。 图 素 

方法 (Q): 柔和 ~ 

源 :器 居中 人 E) 回 边缘 (G) 
阻塞 (0): Ce 0 % 
大 小 :一 你 素 


3 录入 其 他 文字 使 用 同样 的 
方法 ， 继 续 制 作文 字 ， 如 图 因 
网 上 所 示 。 饮 诈 : 加 A 中 日 培训: [100%| > 


属国 
© LT Button | 


4 天 Button 


@ | “条 圆 角 拭 形 5 fxr- 
DD .加 亿 . 因 加 首 
[NM 


Photoshop APP UI 设计 从 入 门 到 精通 


5.5 
UI 设计 师 必 读 : 手机 UI 中 的 颜色 挫 配 


5.5.1 简约 配色 


手机 UI 的 配色 最 好 不 要 超过 三 种 。 第 见 的 色相 有 变 橙黄 绿 青 监 此 等， 色相 差异 如 条 比 较 明 
显 ， 主 要 色彩 的 选取 就 容易 多 了 。 我 们 可 以 选择 对 比 色 、 临 近 色 、 冷 上 暖色 调 互 补 等 方式 ， 也 可 
以 直接 从 成 功 作 品 中 借鉴 主 辅 色调 配 ， 像 朱红 点 绥 深 蓝 和 明黄 点 绥 深 绿 等 色相 。 话 昌 如 此 ， 但 
是 设计 需求 在 实际 的 色彩 分 配 上 还 是 会 出 现 很 多 复杂 的 问题 。 


1/ 02:26 
Ha bbl 


| 1 will be there yp 
, Better Man 
Robbie War 


04:56 
Lord rm doing all i can to be a better man 


01:21 03:22 


如 上 图 所 示 ， 根 据 画 面 信息 的 多 少 ， 会 有 更 多 色彩 区 域 的 层级 划分 和 文字 信息 层级 区 分 需 
Be AA rt Pa a ER CH A eed sa hh i A a rie ea a En A 4 
a et RA a 0 le rcs 


ll | ae 


在 设计 过 程 中 ， 只 要 抓 住 营 加 、 柔 光 和 透明 
上 度 〈 在 Photoshop 中 主要 参数 为 “不 透明 度 ”) 
这 三 个 关键 词 就 可 以 了 。 但 需要 注意 的 是 ， 透 明 
度 和 填充 不 一 样 ， 透 明度 是 作用 于 整个 图 层 ， 而 
填充 则 不 会 影响 到 “混合 选项 ”的 效果 。 
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在 讲 营 加 和 和 柔 光 之 前 ， 我 们 和 完了 解 一 下 配色 拉 巧 的 原理 :; 用 纯 白 色 和 纯 状 色 通 过 “有 登 加 ” 
和 “和 柔 光 ”的 混合 模式 ， 再 选择 一 个 色彩 得 到 最 匹配 的 其 色 。 就 像 调 整 饱 和 度 和 明度 ， 再 通过 
调整 透明 度 选 取 最 适合 的 辅 色 一 样 。 
最 佳 色 域 


10% 20% 30% 40% 50% 60% 70% 80% 90% 100% 《一 透明度 填充 


如 上 图 所 示 ， 只 要 调整 琶 加 /和 柔 光 模式 的 黑白 色 块 的 10% 到 100% 的 透明 度 就 可 以 得 到 差 卉 较 
明显 的 40 种 配色 ,通过 这 种 技巧 ， 每 一 种 闫 色 都 能 轻易 获得 失误 是 0 且 无 穷尽 的 “天 然 配色 。 
为 登 加 和 季 光 模式 对 图 像 内 的 最 高 完 部 分 和 最 阴影 部 分 无 调整 ， 所 以 这 种 配色 方法 对 纯 黑 色 和 
加 三 二 er 民 天 | 


5.5.3 具体 案例 


通过 前 面 的 讲解 ， 我 们 也 试 着 做 一 个 小 案例 吧 ! 相信 只 要 理解 了 上 面 的 方法 ， 就 可 以 在 你 
Hy Bebb ed ha 

(1) 迁 择 一 个 黑色 或 日 色 或 黑 章 渐 灾 点 、 | 线 面 或 者 也 体 ， 

(2) 通过 混合 模式 里 选择 登 加 或 柔 光 。 

(3) 调整 不 透明 度 ， 从 1% 到 100% 随 意 调试 ， 也 可 以 直接 输入 一 个 整数 值 。 轻 质感 类 画面 我 
们 可 以 选择 20% 到 40% 的 透明 度 ， 重 质感 类 画面 可 以 选择 60% 以 上 。 


方法 延伸 : 依照 前 面 的 方法 ， 再 将 其 运用 到 某 一 个 按钮 
上 。 通 过 依次 调整 混合 选项 中 的 “阴影 、 外 发 光 、 摘 边 、 
内 阴影 、 内 发 光 ”每 参数 看 不 同 的 效 采 。 


ol 


本 章 主 要 收录 了 3 个 有 特色 的 文字 设计 制作 实战 练习 ， 包 括 添 
加 斜面 和 浮雕 、 渐 变 填 加 、 国 案 本 加 等 制作 过 程 ， 使 读者 不 仅 
能 看 到 突 例 中 的 具体 操作 过 程 ， 还 能 学 到 更 高 级 的 操作 技巧 。 


人 国人 国人 国人 
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第 6 章 ” 炫 酷 字体 


@ 光盘 路 径 


Chapter06/Media 


金属 具有 特定 的 色彩 和 光 洋 ， 强 度 大 ， 校 角 分 明 。 人 金属 字体 具有 微 凸 
状 及 金属 光泽 等 特征 ， 以 达到 在 视觉 上 呈现 出 有 立体 感 及 质感 的 目的 。 


CS4 CS5 CS6 CC 


设计 师 采 用 光 立 渐变 登 加 等 为 文字 制作 出 金属 生 有 的 生 锈 的 质感 ， 再 利用 笠 面 和 浮 计 、 
投影 制作 出 厚度 和 立体 感 ， 接 看 为 文子 添加 与 务 负 相配 的 颜色 ， 最 后 对 整体 色调 进行 统一 的 


调整 。 


OO 1 打开 文件 执行 “文件 > 打 
开 ” 命 令 ， 在 弹出 的 对 话 框 中 ”县 SANE 书 
选择 “背景 素材 . jpg” 素材， 计时 ” EE 
将 其 打开 ， 如 图 国 辆 所 示 。 2 00% | 

ee | 说 定 : 同 出 辣 填充 : |100% | > | 


加" 
Wl 


dl he 


rm 


0 〇 2 导入 素材 执行 “文件 > 打 
开 ” 命 令 ， 在 弹出 的 对 话 框 中 本 ad SPS LP 关 |] 加 TH 遇 目 
nw os lo | : i | | 正常” :| 生肖 明度 : |100%| -| 
和 “三 角 .psd” 素 材 将 其 时 | 汪 RE 因 丸 中 日 二 [oo -| 


打开 并 拖 入 到 场景 中 ， 如 图 因 
国 所 示 。 


CLB NA/ 
| 《NA/AKE NI 
{IS $25 // DOOR OPEN 人 op 
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Photoshop APP UI 设计 从 入 门 到 精通 


〇 3 绘制 扬声器 单 击 工具 箱 中 
的 “椭圆 工具 ”按钮 ， 在 选项 
栏 中 设置 工作 模式 为 “像素 ”。 
$x M0 Bt > | eer a i 
制 正 圆 形状， 将 图 层 名 称 修改 
为 “扬声器 ”, 如 图 贺 国 所 示 。 


〇 4 添加 内 阴影 双击 “扬声器 ” 
图 层 ， 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “内 阴影 ”选项 ， 
设置 参数 ， 为 其 添加 效果 ， 如 
国 所 示 。 


0 〇 6 添加 颜色 要 加 继续 在 “图 
层 样式 ”对 话 框 中 选择 “颜色 
登 加 ”选项 ， 设 置 参 数 ， 为 其 
添加 效果 ， 如 图 四 四 所 示 。 


0 〇 6 添加 图 案 本 加 继续 在 “图 
层 样式 ”对 话 框 中 选择 “颜色 
登 加 ”选项 ， 设 置 参数 ， 为 其 
添加 效果 ， 如 图 国 因 所 示 。 


(OO / 添加 文字 单 击 工具 箱 中 
的 “ 横 版 文字 工具 ”按钮 ， 在 
选项 栏 中 设置 文字 的 字体 为 
"Prarnoll er leo ed 汪 ee A 
“126. 8”， 颜色 为 紫色 (R: 
ony Ge uy Be A me 
页 面 上 输入 相应 文字 ， 如 图 国 
四 睫 示 。 


Pp 到 :| 回力 工 互 男 
正常 ?| 不 透明 度 : | 100%| ~ 
弯 E: 因 中 四 填充 : 100%| 


© | | 5 
上 
i 


EE 
DD 六 回力 .四 加 人 曾 


内 阴影 
结构 
混合 模式 (6): 正常 | 
不 透明 度 (D): a 75 % 
角度 (A): | 一 。 | 165 度 网 使 用 全 局 光 (G) 
距离 (D): PS 29 像素 
阻塞 (c): 65  % 
大 小 (5): ^ 40 像 喜 
品质 
和 | - 消除 强占 () 
杂 色 (N): 人 0 % 
| 设置 为 默认 值 | | 复位 为 默认 值 | 
颜色 又 加 
颜色 
混合 模式 (6): 变 暗 | 
不 透明 度 (0O): 51  % 
| 设置 为 默认 值 | | 复位 为 默认 值 
图 案 亚 加 
图 案 
混合 模式 (6): 正常 ~ 
不 透明 度 (Y): rn 100  % 
图 案 : 园 | [ 贴 紧 原点 (A) | 
瘦 放 (5S): 了 15 596 


本 与 图 层 榜 接 (0 
| 设置 为 默认 值 | | 复位 为 默认 值 | 


t= 


DD 六 回 四 .四 辐 
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O08 添加 光泽 双击 “文字 ”图 结构 

= 6 及 = os 混合 模式 (6): 溶解 M 

属 ,| 在 弹出 的 “图 层 样 式 ” 对 | | eaam Se 

话 框 中 选择 “光泽 痒 ” je ml 设 角度 (VY:| < 153 度 

置 参数 ， 为 其 添加 效果 ， 如 图 ID 人 
大 小 (S): 120 ”像素 

15 轩 1 oh PR 消除 锯齿 

呈 国外 Nb 避 反 相思 


[| 设置 为 默认 值 “| | 复位 为 默认 值 


9 添加 渐变 要 加 继续 在 “图 并 " 
===| » ~ 99 ; y » -又 7 vy AE 混合 模式 (O): 正常 了 仿 色 
层 样 i 对 | 是 框 中 ji 择 湖 让 不 透明 度 (pP): ~ % 


50 


车 加 中 选项 》 设置 参数 ， 为 其 渐变 : 尽 向 fR) 
样式 (): 续 性 v 思 与 图 层 对 齐名 
添加 效果 > 加 图 加 图 所 未 [©) 前 度 (N): me | 117 度 
缩放 (人 ): - ^ 100 % 
| 设置 为 默认 值 | | 复位 为 默认 值 | 


1 人 添加 投影 继续 在 “图 层 样 
式 ”对 话 框 中 选择 “投影 ” 选 “站 


项 ， 设 置 参 数 ， 为 其 添加 效果 ， em: ENE。 
加 | 不 透明 度 (O): ps 85 % 
如 图 困 团 所 未 前 度 (A): | 一 | 165 度 团 使 用 全 局 光 (G) 
距离 (D): 17 ”像素 
扩展 (R): 22  % 


大 小 (5): = 35 像素 


1 人 绘制 其 他 文字 使 用 同样 的 
方法 制作 出 其 他 效果 的 “ECHO” 
文学 ， 在 图 层面 板 中 分 别 将 新 制 
作 的 “ECHO” 文 学 图 层 的 填充 调 
整 为 0%， 如 国 折 示 。 


1 2 添加 文字 单 击 工具 箱 中 
的 “模版 文字 工具 ”按钮 ， 在 
选项 栏 中 设置 文字 的 字体 为 
上 ES 

颜色 为 日 色 。 之 后 任 页 面 上 和 输 
入 文字 ， 如 图 园 园 所 示 。 


窒 : |100% | ~ 


: |100% 


Photoshop APP UI 设计 从 入 门 到 精通 


1 3 添加 内 阴影 双击 “文字 ” 
图 层 , 在 弹出 的 “图 层 样式 ”| | am 
对 话 框 中 选择 “内 阴影 ”选项 ， 混合 模式 B)， 演 和 -IE 


不 透明 度 (0): 吐字 19 % 
顺 IE 参 数 9» 为 El 杰 加 效 果 ? 如 前 度 (A): | -39 度 使 用 全 局 光 (G) 
多 所 示 。 距离 D): 一 51 像素 
阻塞 (C): 5 3 % 
大 小 (5): 68 剧 素 


1 4 添加 渐变 又 加 继续 在 “图 yaa 


渐变 


层 不 f ray i x 证 相 三 中 选择 | 渐 下 混合 模式 (0): 正常 = 回 仿 色 

腔 9》 、 :计量 估 类 J 不 透明 度 (人 p): 65 6 
人 i IE Rat 
次 力 中 效果 》 如 国 上 所 示 样式 (0): 线性 Y 园 与 图 层 对 齐 锌 


角度 :| 。 ) -102 度 


第 放 (S): ZS 100  % 


| 设置 为 默认 值 | | 复位 为 默认 值 | 团 
27 


15 添加 颜色 要 加 继续 在 “图 

0 ee PT 

3 Wn 2 A 颜色 
混合 模式 介 ): 颜色 ~ 加 加 


添加 效果 》 如 图 轩 国 所 示 0 不 透明 度 (0): sw 97  % 


| 设置 为 默认 值 | | 复位 为 默认 值 


16 添加 投影 继续 在 “图 层 样 

式 ” 对话 框 中 选择 “投影 ” 选 | 一 

2 a ba 混合 模式 四。 正片 到 记 -mm 
不 透明 度 (D): ^ 85 % 


如 加 所 示 。 角度 (: | 一 | 165 度 加 使 用 全 局 光 (G) 


距离 D): 17 “| 像素 
扩展 (R): 22 % 
大 小 (5): 守 辽 35 | 


尾 性 | 44 | -三 属性 | 


17 添加 通道 混合 器 单 击 图 加 BSR 加 Bn 


8: | 自 定 : 巴 届 :| 自 定 
层面 板 ” 下 方 的 “创建 新 的 填 sme | 
充 或 调整 图 层 ”按钮 ， 在 弹出 “一 全 | > 
的 下 拉 菜 单 中 选择 “通道 混合 和 se 

\ , 黑色 : -1 % 黑色 : 

器 ”命令 ， 在 弹出 的 对 话 框 中 |s 一 一 

设置 参数 ， 对 图 像 的 整体 进行 ”FE 
| [图 | 二 各 | 加 二 总 R 和 器 
调整 ， 如 图 图 j 和 :| 角 E = :| 角 
由 输出 通道 : | 黄色 输出 通道: | 黑色 

所 示 a 单 色 音色 

青色 : 469 | 哆 青色 : 

洋红 |-67 3 洋红 

黄色 bu 芽 黄色 

黑色 -35 |% 3 

总 计 a EE 


1 8 删除 蒙 版 选择 “ 通道 ; 全 
前 1” 图 层 , 将 其 独 层 蒙 版 删除 ， 
并 在 “图 层 ” 面 板 中 将 图 层 的 
不 透明 度 调整 为 16%， 混 合 模 
EN Re I Wh Ew nny 
国 上 所 示 。 


9 创建 新 的 通道 混合 器 使 用 
同样 的 方法 ， 继 续 创建 一 
新 的 通 道 混合 器 图 层 并 命名 为 

a dd em al sat 
参数 ， 添 加 效果 ， 如 图 四 
图 所 示 。 


2 0 〇 删除 蒙 版 选择 “通道 混合 
人 毅 2” 图 层 , 将 其 图 层 蒙 厂 删 除 ， 
并 在 “图 层 ” 面 板 中 将 图 层 的 
不 透明 度 调整 为 86%， 如 图 因 
困 所 未 。 


C LB N/A 


| MRAAXE ， 


* OPEN RP 


属性 | | | 展 性 | 
回 口 通 冲 员 和 器 回 口 BBR 和 器 
据 : [ 自 定 i IN&: | 和 
输出 通道 :| 青色 输出 通道 : | 洋红 
单 色 单 色 
青色 : +77 “| 号 青色 : 
洋红 : +50 | 哆 洋红 : 
黄色 : +2 % 黄色 : 
黑色 : 0 | 多 黑色 : 
SET EF [= 中 
* 国 * 国 
展 性 | 属性 | 
加 口 通 冲 员 和 器 回 口 BSR 和 
遍 &: | 自 定 预 股 : | 自 定 
输出 通道 : | 黄色 输出 通道 ; | 黑色 
单 色 单 色 
青色 : 青色 : 
洋红 : 洋红 : 
黄色 : 黄色 : 
黑色 : 黑色 : 
总 计 : 总 计 : 
x 国 # 国 


CLUB3 N/A 


| 《LT NA | NI 


oP 


第 6 章 米 酷 字体 


中 了 宫 前 


*| 不 透明 度 : |15% | ~ | 


填充 : |100%| > 


| 《ZTC NI 
RY IS $25 // DOOR OPEN A P 


© fx 


x 
壁 屋 二 
Pa 到 :| 国 允 荆 口 明 由 
正常 ?| :要 明度 : |86% | ~ 
宽广 : 团 os 中 自 。 填充 : |100%| -> 
© : 道 混合 器 2 | 
多 | 的 通道 吕 合 器 1 


图 关 之 
回 外. 和 馈 辐 曾 pm 


人 之] 添加 渐变 映射 单 击 “图 层 ” 
面板 下 方 的 “创建 新 的 填充 或 
调整 图 层 ” 按 钮 ， 在 弹出 的 下 
拉 菜单 中 选择 “渐变 映射 "命令 ， 
在 弹出 的 对 话 框 中 设置 参数 ， 
对 图 像 的 整体 进行 调整 ， 如 图 
图 所 示 。 


人 2 删除 蒙 版 选择 “渐变 映射 
1” 图 层 ， 将 其 图 层 蒙 版 删除 ， 
并 在 “图 层 ” 面 板 中 将 图 层 的 
不 透明 度 调整 为 12%， 混 合 模 
式 调整 为 “ 释 加 ”， 如 图 加 
国 所 示 。 


人 3 添加 色 阶 单 击 “ 图 层 ” 面 
板 下 方 的 “创建 新 的 填充 或 调 
驹 图 属 | 护 杀 川 三 弹出 的 中 科 
pee a 
弹出 的 对 话 框 中 设置 参数 ， 对 
图 像 的 整体 进行 调整 ， 如 图 国 
国 所 示 。 


医 | 渐 训 映射 


Photoshop APP UI 设计 从 入 门 到 精通 


Se] NA 
二 全 4 《LAKAE NN 


DPEN AT MP 


加 工 互通 
:| 涉 透 有 明度; 12% | ~ 
性 癌 填 襄 : |100%| = 


mE: 图 


[es 
过 变 映 射 1 
| 重 靳 配 遇 身 


电 疯 ”通道 RR 合 器 2 


咖 | 诵 诈 音 们 路 1 
co 产 . 本 国 辐 


出 A 29 1.00 226 
| 
J 
输出 色 阶 : |0 255 CLUB NA, 
CU 


WES /M/E Ni 


ENRY IS 925 /1 DOOR OPEN A PP 


之 4 添加 色相 /1 饱和 度 单 击 “ 图 
技 ” 面 板 下 方 的 “创建 新 的 填 
爷 或 调整 图 层 ” 按 钮 ， 在 弹出 
的 下 拉 沫 单 中 选择 “色相 / 饱 
和 上 度 ” 命 令 ， 在 弹出 的 对 话 框 
中 设置 参数 ， 对 图 像 的 整体 进 
行 调整 ， 如 图 国 国 所 示 。 


之 D 删除 蒙 版 选择 “色相 / 饮 
和 上 度 1” 图 层 ， 将 其 图 层 蒙 版 
删除 ， 并 在 “图 层 ” 面 板 中 将 
图 层 的 不 透明 度 调 整 为 41%， 
如 图 国 国 所 示 。 


之 6 添加 色 阶 单 击 “图 层 ” 面 
板 下 方 的 “创建 新 的 填充 或 调 
经 图 局 ?| 返 包 ,在 时 出国 拉 
ee 
弹出 的 对 话 框 中 设置 参数 ， 对 
图 像 的 整体 进行 调整 ， 如 图 团 
国 记 示 。 


属性 | 
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44 | "三 


色相 /饱和 度 


1 


1 


Ey CLUB NA 
十 N MAXE NE 


OR OPEN A RP 


输出 色 了 :|0 255 


CLB NN 
NA 人 UK 


*| 透明度: 
《中 目 。 境 训 ; 


| 宙 1% 


100%% 
© i 色相 /饱和 度 1 
ed 


© ws 8| | em 


过 | 加 | 新 挛 肿 射 1 
NP | kr. ® 四 名 


CLB NA, 
1 MA ， 人 UK 


ENTY IS DOCR OPEN A PP 


加 到 ) 有 名 


Photoshop APP UI 设计 从 入 门 到 精通 


之 / 调整 不 透明 度 选择 “ 色 阶 
2” 图 层 ， 在 “图 层 ”面板 中 将 
图 层 的 不 透明 度 调 整 为 78%， 
如 图 国 园 所 示 。 


人 8 添加 纯色 单 击 “ 图 层 ” 面 
板 下 方 的 “创建 新 的 填充 或 调 
整 图 层 ”按钮 ， 在 弹出 的 下 拉 
菜单 中 选择 “纯色 ”命令 ， 在 
弹出 的 对 话 框 中 设置 参数 ， 对 
图 像 的 整体 进行 调整 ， 如 图 团 
国 所 示 。 


十 |N 4 M/E NL 


4 IS $25 // DOOR 


尝 :| 不 透明度: [78% | > | 
久 f 直面 填 帝 :|100%| -> | 


局 ui@| | 色 阶 = 
[| 


过 色相 / 钨 和 和 度 1 


CLUB NN 


电 | 


IPEN A RP 


人 9 绘制 细节 选择 “纯色 1 ” 
图 层 蒙 版 的 缩 览 图 ， 设 置 前 景 
色 为 黑色 ， 使 用 “画笔 工具 ” 
在 页 面 上 进行 涂抹 ， 隐 藏 部 分 
效果 。 在 “图 层 ” 面 板 中 调整 
图 层 的 混合 模式 为 “颜色 减 淡 
(添加 ) ”， 最 终 效果 如 图 图 
国 所 示 。 


CHN AL RNOCGE NIGH 


ENRY IS $25 // DOOR OPEN A RP 


[Pp 到 :| 回力 工 口 明 目 


| 蛙 性 减 淡 【 添 .， *| 不 透明 度 : |100% | ~ | 
诚 E: 回 如 中 四 填 训 :|100%| -| 


CLH3 NA 
《VTS NiOH 
pe 


二 上 加 色相 / 暂 和 度 
5 产 . 回 公 . 向 周 
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@ 光盘 路 径 


Chapter06/Media 


钻石 子 体 表现 


钻石 是 美丽 、 浪 漫 、 奢 华 的 象征 ， 以 钻石 为 创作 灵感 设计 出 的 钻石 字 
A 体 是 一 款 带 有 和 负 石 效果 的 中 文人 字体， 适用 于 艺术 设计 、 平 面 设计 等 工作 。 
CS4 CS5 CS6 CC 这 样 的 字体 完美 诠释 了 和 钻石 内 兆 夺 目的 特点 。 


本 例 中 钻石 字体 的 制作 主要 利用 了 多 种 图 层 样式 的 肢 加 方法 。 设 计 师 先 通 过 斜面 和 学 


驹 、 投 影 等 让 文字 具有 立体 感 ， 再 通过 描 边 、 渐 变 倒 加 等 使 文字 具有 金属 色泽 ， 最 后 通过 图 
案 登 加 完成 内 内 发 光 的 铬 石 文字 效果 。 


O1 打开 文件 执行 “文件 > 打 


Ny ay | pa RN Tt eT 图 层 
选择 言 j 对 导 素材 ss 素材 ， £ / We 是 \R 一 | 正常 | -不过 朋 度 : |100%| > | 


将 其 打开 ， 如 图 贺 贺 所 示 。 = (oy < |: i 
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OZ2 绘制 投影 单 击 工具 箱 中 的 
“各 版 出 叶 上 邮 在 沈 现 栏 
中 设置 字体 颜色 为 黑色 ， 字 体 
为 “方正 超 粗 黑 _GBK”， 字 号 
为 《72 是 中 几 在 页 面 忆 竹内 由 
应 文字 ， 如 图 四 四 辆 所 示 。 


ip ?| 加 包工 只 明日 
| 正常 :| 不 租 明 度 : |100% | ~ 
议 E: 团 oA 中 和 填充 : 100%|” 


| 
© 国 
wn 站 钻石 王国 


FNECE FANN NINI 


TT -| 二 | 方正 超 相 黑 …， [~ "| 全 |2 点 |-]aa | 刷 | 


山 
Ww 
ll 
a 
© 
(@y| 


yy 


Photoshop APP UI 设计 从 入 门 到 精通 


| 投影 
03 添加 投影 双击 文字 图 层 ， 结构 
| wlllh | 混合 模式 (8) 正片 又 底 ~ 国 国 
在 弹出 的 “图 层 样式 ”对 话 框 te 
中 选择 “投影 ”选项 ， 设 置 参 me (5) = nemxe 
距离 0): Ce 1 像素 


数 ， 为 其 添加 效果 ， 如 网 四 扩展 R}: 一 0% 


大 小 (5): 吧 m0) 像素 


加 所 示 9° 品质 > 
各:| - 消除 锯 具 (0) 
杂 色 人 N): CC 0 % A Ai ya 
避 图 层 控 空投 影 J) 并 : ls 3 

[让 村) 汉 值 ] [让 位 3 以 值 ] [四 5 SEPTEMBER:2012 a 


〇 4 添加 文字 使 用 “模版 文字 
工具 ”， 继 续 在 页 面 上 输入 同 
样 字体 、 字 号 的 文字 ， 如 图 因 
四 所 示 。 


EE 三 
pa :| 国名 荆 口 曙 四 


LE :| 不通 明度: 100%| 
庶 E: 轩 中国 ”填充 :|100%| 


= 
© 革 
,IT J] 钻石 王国 


” nd: 2 多 ， 工 钻石 王国 fr = 
过 
:MBE 汪汪 @@ 效果 
Pe o . || 一 
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0 9 添加 斜面 和 浮雕 双击 文字 
图 层 ， 在 弹出 的 “图 层 样式 ”| m 


样式 (D: 外 斜面 了 


对 话 框 中 选择 “和 斜面 和 浮 驹 ” pt: 更- 


ULTIMATEB0SS PRESENT: 4 


S 、 守 认 | 深度 D0): 一 7 一 276 % 
选项 ， 设 置 参 数 ， 为 其 添加 效 ee 
lL 大 小 (D: 30 像素 
果 ， 如 图 四 国 所 示 。 软化 P: < 一 2 多 素 
阴影 
角度 (N): _。 90 度 
使 用 全 局 光 (G) 
高 度 : 一 0 三 
光泽 等 高 线 : | ”| 加 消除 句 占 人) 
高 光 模式 (H): 正常 - SD EE 
不 透明 度 (O): » 100  % ey . >、 Ee 
阴影 模式 (A): 高 光 ~ | PA 
en 。 5 SEPTEMBER:2012 fe 
不 透明 度 (C): 30 六 py 11 


0 〇 6 添加 描 边 继续 在 “图 层 样 Ne 


、 、 、 、 、 To. EA ER 

Rh te i ra 撕 这 > NW 
结构 

项 ， 设 置 参数 ， 为 其 添加 效果 ， 大 hg: 本 一 一 一 本 一 色素 


ll 位 置 (P): 居中 ~ 

如 图 固 转 所 示 。 混合 模式 (6): 正常 
不 透明 度 (0): = 100 % 
填充 类 型 P): 渐变 ~ 
渐变 : 反 向 (R) 


样式 ()， 对 称 的 ~” 回 与 图 层 对 齐 人 sm 
器 口 国 \, Es Ey 
角度 (A): (| ) 8 度 口 仿 色 Sd, i si es 
缩放 (c): 一 109  % > bb 
> a > 
[本 3 记 值 ] [ 旭 位 为 默认 值 ] > 5 SEPTEMBER:2012 Me 
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〇 7 添加 渐变 要 加 继续 在 “图 
层 样式 ”对 话 框 中 选择 “渐变 
辩 加 ”选项 ， 设 置 参数 ， 为 其 


渐变 亚 加 

还 加 效果 ， 如 图 四 转 所 示 。 本 
混合 模式 (D): 颜色 减 浅 v [| 仿 色 
不 透明 度 (p): 95  % 


新 变 : 反 向 R) 


样式 (): 线性 ~ ” 周 与 图 层 对 齐 (1) 
角度 (N): | 90 度 
缩放 (5): - 100  % 
[ 设置 为 默认 值 。| | 复位 为 默认 值 | 
( 〇 8 添加 图 案 要 加 继续 在 “图 
层 样 式 ” 对 话 框 中 选择 “图 案 
er we i 2 | yl 
添加 效果 ， 如 图 因 贺 所 示 。 ye 
图 家 
混合 模式 6): 强 光 ~ 
不 透明 度 (Y): 100  % 
图 案 : 回 ，[ 贴 紧 原点 人) | 
第 放 全 ): 729  % 


可 与 图 层 链接 (g) 
| 设置 为 默认 值 | | 复位 为 默认 值 | 


0 〇 9 添加 投影 继续 在 “图 层 样 


式 ” 对 话 框 中 选择 “投影 ” 选 一 吉 。 
Eh 
项 ， 设 置 参数 ， 为 其 添加 效果 ， lap 下 ERE ”时 
WW 不 透明 度 (D): 50 。 
如 国 所 人 钞 。 角度 (A): | ) 120 ” 度 回 使 用 全 局 光 (G) 
中 高 D): < 一 0 像素 
扩展 R): 一” 50 % 
大 小 (5): 21 像素 
品质 


等 高 续 : - 消除 锯齿 (0) 


末 色 (N): < me |) 


yj 图 层 控 空投 影 (J) 
[设置 为 默认 值 _| | 复位 为 默认 值 | 


% 


10 添加 文字 使 用 “模版 文字 
工具 ”， 继 续 在 页 面 上 输入 同 
样 字体 、 字 号 的 文字 ， 如 图 团 
团 所 示 ，。 


.4 \ 
- 人 ep A A # ya jm 
\ | = ry ; 7 | 有 
> 让 六 i 锯 御 启 
和 et “ WY yr 4 1 、 
¥ | 六 
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图 层 三 
PP 型 :| 国 包 荆 口 明 目 
正常 :| 不 委 明 度 : [100%| - 


诺 E: 团 A 中 四 填充 : 


100% | ~ 


ssl 
是 国 
,IT 钻石 王国 


电工 钻石 王国 fr 
多 本 钻石 王国 产 <^ 
@@ 效果 


6 灰 .加 信 . 让 司 


Photoshop APP UI 设计 从 入 门 到 精通 


人 人 添加 斜面 和 浮雕 双击 文字 
图 局 川 在 强 遇 鸭 | 图 属 依 起 | 
对 话 框 中 选择 “和 斜面 和 浮雕 ” 
选项 , 设置 参数 ,为 其 添加 效果 ， 
如 图 园 困 所 示 。 


12 添加 描 边 继续 在 “图 层 样 
式 ” 对 话 框 中 选择 “ 描 边 ” 选 
项 ， 设 置 参 数 ， 为 其 添加 效果 ， 
如 图 园 园 所 示 。 


1 3 添加 渐变 要 加 继续 在 “图 
层 样式 ”对 话 框 中 选择 “渐变 
登 加 ”选项 ， 设 置 参数 ， 为 其 
添加 效果 ， 如 图 园 辆 所 示 。 


1 4 添加 图 案 要 加 继续 在 “图 
层 样 式 ” 对 话 框 中 选择 “图 案 
登 加 ”选项 ， 设 置 参数 ， 为 其 
添加 效果 ， 如 图 困 因 所 示 。 


斜面 和 浮 炭 

结构 
样式 (D): 描 边 浮 睦 。 
方法 (Q): 平 崩 


深度 D): 8 % 
方向 : @ 上 下 

大 小 四: = 24 像素 

软化 中 ): CS 0 像素 


阴影 
角度 (N): 5 120 | 障 
* | 回 使 用 全 局 光 (G) 
二 度 


高 度 30 说 
光泽 等 高 线 :| 上 本 消除 锯 频 QL) 
高 光 模式 (H): 滤 色 ~ 
不 透明 度 (D); 75 % 
阴影 模式 (A): 正片 琶 底 | 
不 透明 度 (O): 一 yz 75  % 


二 设置 为 默认 值 | | 复位 为 默认 值 | 四 
22 


描 边 
结构 
大 小 (5): 区 me 5 像素 
位 置 (P):; 外 部 了 
混合 模式 (6): 正常 ” 
不 透明 度 (O): sy 100  % 
填充 类 型 (F): 渐变 


i | CRAR) 


样式 (0D): 续 性 Y 加 与 图 层 对 齐 (G) 
角度 (A): | | 135 度 仿 色 gs pf ee ee i 
缩放 (C): 100  % 


SEPTEMBER.2012 区 


上 La 


| 设置 为 默认 值 “| | 复位 为 默认 值 
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其 变 严 加 

渐变 

混合 模式 (0): 正常 Y 四 | 仿 色 

不 透明 度 (P): » 100 % 
渐变 : [pee | 回 反 向 人 
样式 0): 对称 的 Y ”与 图 层 对 齐 (D) 
角度 (DIE 24 | 度 
缩放 (5): 一 ys 100  % ts 二 i 


| 设置 为 默认 值 “| | 复位 为 默认 值 


b SEPTEMBER.2012 是， 
力 仿 E 


图 案 释 加 
图 案 
混合 模式 介 ): 正常 
不 透明 度 四 人 忆 % 
图 案 : 辐 | 贴 紧 原点 人 | 


i 
i 
; < 


SEPTEMBER.2012 
缩放 (人 ):， = 50 % | » 


i La 


3 与 图 层 树 接 ( DJ ULTIMATE /7 DJ GRAPHIC // DJ RIVER OO 
| 设置 为 默认 值 | | 复位 为 默认 值 | FREE FOR GIRL 29 
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15 导入 素材 执行 “文件 > 打 
开 ” 命 令 ， 在 打开 的 对 话 框 中 
a ea ea 
打开 并 拖 入 到 场景 中 ， 如 图 图 
园 所 示 。 


1 6 添加 颜色 要 加 双击 “丝带 ” 
图 层 ， 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “颜色 欠 加 ” 选 
项 ， 设 置 参 数 ， 为 其 添加 效果 ， 
如 图 国 图 所 示 。 


1 /7 添加 文字 单 击 工具 箱 中 
a A a hs 
项 栏 中 设置 字体 为 “Bebas 
Neue TD 
选项 栏 中 的 “创建 变形 字体 ” 
按钮 ， 在 弹出 的 对 话 框 中 设置 
参数 ， 在 页 面 上 输入 相应 文字 ， 
如 图 国 国 所 示 。 


1 8 添加 描 边 双击 “文字 ”图 
层 ， 在 弹出 的 “图 层 样式 ”对 
话 框 中 选择 “ 描 边 ”选项 ， 设 
置 参数 ， 为 其 添加 效果 ， 如 图 
国 所 示 。 


BS 


TT K 


La 
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混合 选项 
常规 混合 
混合 模式 (D): 正常 
不 透明 度 (O): 
高 级 混合 
填充 不 透明 度 (F): Dy 100 % 
通道 : 园 cC) 团 MM) 回 YY) 园 kg 
挖 空 (N): 无 bg 
] 将 内 部 效果 混合 成 组 人 
引 将 剪贴 图 层 混 合成 组 P) 
避 透 明 形状 图 层 (D 
图 层 蒙 版 隐藏 效果 (5) 
矢量 蒙 版 隐藏 效果 (H) 
混合 颜色 带 (E): 灰色 
本 图 层 : 0 255 


DD 100 % 


样式 (5): 回 下 弧 v 
名 水 平 (H) 得 直 (V) 
弯曲 (B): +27 % 
水 平 扭曲 (0): 0 % 
垂直 扭曲 (LE): +6 9 
- 
描 边 
结构 
大 小 G): G 2 ”像素 
位 置 P); 内 部 ~ 
混合 模式 (6): 正常 ~ 
不 透明 度 (O): 100  % 


填充 类 型 fF): 渐变 ~ 


汀 朗 : [| 恒生 [>] 口 所 oag) 


样式 QD): 线性 了 ”与 图 层 对 齐 (G) 
前 度 (A):| 。 ) -90 度 仿 色 
缩放 (CO): 一 100  % 


| 设置 为 默认 值 | | 复位 为 默认 值 | 
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玫 三 2 27 
Pp 型 :| 国外 工人 品 明 四 


+ | 不 透明 度 : |100%| | 
锁定 : 加 sf 中 和 ”填充 : |100%| ”| 


网 泛 
让 


多 ， 工 钻 石 王国 txr 


多 ， 工 ”钻石 王国 灰 ~ 


- 


大 .加 合 . 面 辕 CT31 
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19 添加 渐变 要 加 继续 在 “图 
层 样 式 ” 对 话 框 中 选择 “渐变 
痘 加 ”和 选项， 设置 参数 ， 为 其 
添加 效果 ， 如 图 图 国 所 示 。 


2D0 添加 投影 继续 在 “图 层 样 
式 ” 对 话 框 中 选择 “投影 ” 选 
项 ， 设 置 参数 ， 为 其 添加 效果 ， 
如 图 四 团 所 示 。 


21 导入 素材 执行 “文件 > 打 
开 ” 命 令 ， 在 打开 的 对 话 框 中 
选择 “花纹 . psd” 素材， 将 其 
打开 并 拖 入 到 场景 中 ， 如 图 四 
图 所 示 。 


2 设置 混合 模式 在 “图 层 ” 
面板 中 将 “花纹 ”图 层 的 混合 
模式 调整 为 “ 变 亮 ”， 如 图 四 
图 所 示 。 


Photoshop APP UI 设计 从 入 门 到 精通 


渐变 县 加 

渐变 

混合 模式 (D): 正常 v 上 凯 仿 色 
不 透明 度 (P): »y 100  % 


渐变 : | “二 | 回 反 向 (R) 
样式 (LD): 线性 Y ”IM 与 图 层 对 齐 (1) 
角度 (N): | ， | -90 度 


缩放 (5): a 100  % 


| 设置 为 默认 值 。| | 揽 位 为 默认 值 | 


投影 

结构 

混合 模式 (6): 正片 县 底 | 

不 透明 度 (0): 一 7 一 一 团 % 
角度 (A): | * | 90 度 加 | 使 用 全 局 光 (G) 
距离 0): Te 7 像素 
扩展 (R): < ik % 
大 小 (S): spy 87 像素 

品质 


等 高 线 : | ~ 消除 锯齿 0 


杂 色 N): C= 一 0 % 40| 


-> 


. Ca ”2 wp 河 2 FF 
OR 2 
、 i LTIMATEBOSS PRESFRT 本 和 
NS 有 


ULTIMATEBOSS PRESENT: 下 4 


1 


Tr 


DJ ULTINATE // DJ GRAPHIC // DJ RIVER 


| FREE FOR GIRL 下 
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i SEPTEMBER.2012 ee- 


一 39 


Tr ED 


iP 到 #| 国 关 工 囊 疼 
| 正常 * | 不 透明度: |100% | ~ 
由 :加 sf 中 日。 壤 和 :ino%| 


四 因 访 弘 


®tour2012 


“es 


十， 站 果 
< 六 回 罚 时 


至 屋 
IP :| 国名 前 


2 :| 怀表 天 谋 : [100% | ~ | 
证 :加 of 中 日。 培训: 100%| | 


“图 
ls 全 


时 bp tour 2012 


-站 


党 小 果 
2 六. 回 作 . 向 国 


第 6 章 炫 酷 字体 


2 3 添加 渐变 映射 单 击 “ 图 层 ” RS 2 
面板 下 方 的 “创建 新 的 填充 或 4 一 
调整 图 层 ” 授 留 ， 在 弹出 的 下 
拉 菜 单 中 选择 “渐变 映 映 ” 命 
令 ， 在 弹出 的 对 话 框 中 设置 参 
数 ， 对 图 像 进行 整体 调整 ， 如 
图 困 辆 所 未 。 


层 性 
国 | 回 党 和 映射 


DJ ULTIMATE // DJ GRAPHIC / 中 ve 


LFREE FOR GIRL 


24 调整 细节 在 “图 层 ” 面 板 
中 将 “渐变 映射 1” 图 层 的 泥 
合 模 式 调 整 为 “过 加 ”， 不 史 
明度 调整 为 55%， 如 图 图 四 所 
钞 。 


imareeoss PRESENT: Oo 


[Dp :| 国 罗 全 曾 

| 要 0 | 不 通明 度 : |55% | ~ | 
认 E: 加 so 由 站 填充 : |100% | -| 
人 


dh 


6SEpTEMBER TI 一 ， 


1 天 IHTP| In 
I 


(DJ ULTIMATE // DJ GRAPHIG // 0) RIVER tour 2012 图 ke 加 


BEE FOR GIAL 


3 六 回 看 罚 辕 


2D 添加 色 阶 单 击 “图 层 ” 
面板 下 方 的 “创建 新 的 填充 或 
调整 图 层 ” 按 钮 ， 在 弹出 的 下 
拉 末 单 中 选择 “ 色 阶 ”命令 ， 
在 弹出 的 对 话 框 中 设置 参数 ， 
对 图 像 进行 整体 调整 ， 如 图 国 
园 上 万 示 。 


DJ ULTIMATE /7 DJ GRAPHIC // 0 RIVER 


FREE FOR 和 下 


输出 色 阶 : |0 用 255 


Photoshop APP UI 设计 从 入 门 到 精通 


Me 


26 改变 整体 色调 二 S ULTIMATEBOSS pRESENT | 
“图 层 1”, 设 前 景色 为 黄色 (RIN 和 革 于 2 
wig ae ered sa ~ a 
捷 键 Alt+Deletey> 填充 颜色 。 
在 “图 层 ”面板 中 将 “图 层 1” 
的 混合 模式 调整 为 “亮光 ”， 
不 透明 虚 调 整 为 25%， 如 图 国 
国 上 所 示 。 


和 dd 世 
| Pa :| 国 允 荆 品 明 目 
Em EE 
议定 : 加 宁国 ”十 襄 :|100%| ”| 


SEPTEMBER.20 


VNIIR NIGHTC! lIR 户 电 


DJ ULTIMATE // DJ GRAPHIC // DJ RIVER 


FREE FOR GIRL 


人 有 新 建 图 层 新 建 一 个 “图 
层 2”， 议 前 景色 为 灰色 〈R: 
BO, a Od, :GD et 


键 《Alt+Deletey> 填充 颜色 ， 如 图 层 二 
图 国 国 所 示 。 IP 江 ;| 国名 TT 避 有 表 目 


| 
WE 田 of 中 BM: [07 


66 9 OX 2 人 
调整 图 层 多 至 ~ 
28 外 在 er Ww ULTIMATEBOSS PRESENT: 
中 将 “图 层 2” 的 混合 模式 调 [an [oad 
整 为 “颜色 加 深 ”， 不 透明 度 


调整 为 37%， 如 图 国 国 所 示 。 Th DANG = 
— /Nd pe Pp :| 国 姑 了 吕 明 目 


颜色 加 腔 | 不 透明 度 : |37% | -| 
斌 证: 图 m 中 看 。 境况 :|100%| 


i 
Wp 有 六 yx Ey 
2 潮 9 SEPTEMBER:2012 用 Se 

DJ ULTIMATE /7 DJ GRAPHIG // DJ 一 nM | 
FREEFOR GIRL ES 


机 
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第 6 章 ” 米 酷 字体 


@ 光盘 路 径 
Chapter06/Media 


立体 岩石 材质 字体 制作 


Lye = 以 岩石 为 创作 灵感 制作 出 的 宕 石材 质 字 体 符 点 鲜明 。 这 种 立体 岩石 效 
>» 果 文 字 束 像 是 在 岩石 上 雕刻 出 的 文字 ， 很 有 鬼 径 神 工 、 大 气 轩 勃 之 气势 ， 
CS4 CS5 CS6 CC 适合 运用 到 海报 广告 中 。 


本 例 中 立体 宕 石材 质 字 体 的 制作 主要 利用 了 图 层 样式 的 个 加 。 设 计 师 首先 选择 了 与 岩石 


相近 的 凑 色 制作 文字 ， 再 通过 斜面 和 浮雕 、 投 影 等 让 文字 具有 立体 感 ， 最 后 通过 淹 变 登 加 等 
使 文字 的 过 渡 色 和 光影 更 加 日 然 


2014 一- 


〇 和 打开 文件 执行 “文件 > 打 
开 ” 命 令 ， 在 弹出 的 对 话 框 中 = 
选择 “背景 . jpg” 素 材 ， 将 其 pn Tn 


打开 ， 如 图 贺 贺 所 示 。 


SUNDAY 20 | 正常 。 ”<| 通明 度 : |100%| -| 
“5 “Eo 


33.33% | 峭 :9.12M/38.6M > | 
(0 〇 2 添加 文字 单 击 工具 箱 中 的 i 
“模版 文字 工具 ”按钮 ， 在 选 pun: :| 加 OTO 曙 日 
fa mi ¢é 而 人 | 人 全 全 站 趟 透明 魔 : [100% [100% [~ | 


SICKFLYERS.CON PRESENTS 


SUNDAY JAN 20 补 定 : : [p05 | = 
oo - 


国 所 未 。 


i; T -| UL ||MyriadPro -| |Regular | > 


三 [72 点 |-| aa [锐利 


川 | 
四 
人 避 
) 
哪 
回 
(@y| 


(OO3 添加 斜面 和 浮雕 双击 文字 
图 层 ， 在 弹出 的 “图 层 样 式 ” 
对 话 框 中 选择 “斜面 和 浮雕 ” 
选项 ， 设 置 参数 ， 为 其 添加 效 
果 ， 如 图 因 加 所 示 。 


〇 4 添加 内 阴影 继续 在 “图 层 
样式 ”对 话 框 中 , 选择 “内 阴影 ” 
选项 ， 设 置 参数 ， 为 其 添加 效 
果 效 果 ， 如 图 辆 因 所 示 。 


( 〇 5 添加 颜色 要 加 继续 在 “图 
层 样 式 ” 对 话 框 中 选择 “颜色 
警 加 ”选项 ， 设 置 参数 ， 为 其 
添加 效果 ， 如 图 四 国 所 示 。 


6 添加 投影 继续 在 “图 层 样 
式 ” 对 话 框 中 选择 “投影 ” 选 
项 ， 设 置 参数 ， 为 其 添加 效果 ， 
如 图 因 因 所 示 。 


7 添加 文字 使 用 “ 横 版 文字 
工具 ”继续 在 页 面 上 输入 相应 
文字 ， 如 图 四 国 所 示 。 


Photoshop APP Ul 设计 从 入 门 到 精通 


斜面 和 浮 崩 
结构 
样式 (1D): 内 斜面 ~ 
方法 (9): 平滑 4 


深度 D): < 100 % 
方向 : @ 上 OF 下 
大 小 (Z): 225 ”像素 
软化 (): 15 ”像素 
阴影 
角度 (VY): 一 87 度 
| ”| 回 使 用 全 局 光 (G) 
高 度 : < |64 度 
光泽 等 高 线 : ”| 回 消除 纪 占 人 
高 光 模式 (H): 滤 色 M 
不 透明 度 (0): (5 0 % 
阴影 模式 (A): 正片 琶 底 -加 到 


不 透明 度 (C): a 和 0 % 06 


内 阴影 
结构 

混合 模式 (6): 正片 县 底 ~ 国 呈 
不 透明 度 (D): 一 7 一 一 50  % 


角度 (A): 上 ) 37 度 加 使 用 全 局 光 (G) 
距 高 D): < 0 ”像素 
阻塞 (QO): Z5 22 % 
大 小 (5): 5 15 像素 
品质 
和 | - 回 消 疹 锯齿 人) 
杂 色 (N: (5 0 % 
颜色 亚 加 
颜色 
混合 模式 (8) 正常 ~ 到 


不 透明 度 (0): ez 100 % 


| 设置 为 默认 值 | | 复位 为 默认 值 | 


投影 
结构 
混合 模式 (6): 正片 又 底 ”加 是 
不 透明 度 (0): 一” 50 % 


角度 (A): (| 50 ” 度 万 使 用 全 局 光 (G) 
距离 D): 5 5 像素 
扩展 RJ: 一 0 一 % 
大 小 (5): 5 15 像素 


A 
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SUNDAY JAN 20 


SICKFLYERS.COM PRESENTS 


SUNDAY JAN 20 


SICKFLYERS.COM PRESENTS 


SUNDAY JAN 20 


| 正常 <| 书 妥 明度 : |100% | - | 
久 定 : 图 of 中 自 。 填 襄 : |100%| "| 


[3 
2014 
全 


® TT 2014 
他 效果 
5 产 . 回 作 . 向 国 


0 〇 8 添加 渐变 要 加 双击 “文字 ” 
图 层 ， 在 弹出 的 “图 层 样式 ” 
Do an a 
项 ， 设 置 参数 ， 为 其 添加 效果 ， 
如 图 因 国 所 示 。 


0 〇 9 绘制 斜面 和 浮雕 继续 在 “图 
层 样式 ”对 话 框 中 选择 “斜面 
和 浮雕 ”选项 ， 设 置 参 数 ， 为 其 
添加 效果 ， 如 图 国 因 所 示 。 


10 添加 光泽 继续 在 “图 层 样 
式 ” 对 话 框 中 选择 “光泽 ” 选 
项 ， 设 置 参 数 ， 为 其 添加 效果 ， 
如 图 园 团 所 示 。 


1 1 添加 图 案 要 加 继续 在 “图 
层 样 式 ” 对 话 框 中 选择 “图 案 
晋 加 ”选项 ， 设 置 参数 ， 为 其 
添加 效果 ， 如 图 加 困 所 示 。 


1 2 添加 投影 继续 在 “图 层 样 
式 ” 对 话 框 中 选择 “投影 ” 选 
项 ， 议 置 参数 ， 为 其 添加 效果 ， 
如 图 园 国 所 示 。 


avay er 
第 6 章 烃 
渐变 村 加 
渐变 
混合 模式 (D): 正常 回访 色 
不 透明 度 (p); 75 % 
渐变 : 而 || 回 = SICKFLYERS.COM PRESENTS 
本 a SUNDAY JAN 20 
样式 () 线性 ~ 团 与 图 层 对 齐 () 
角度 VY: (人 oo0 度 
背 放 (S): — 100  % 


| 设置 为 默认 值 | | 复位 为 默认 值 | 


斜面 和 浮雕 
结构 
样式 (D: 内 斜面 7 
方法 (Q@): 平滑 ~ 


深度 D): Ce 210 % 


方向 : 四 上 QO 下 
大 小 加: 0 像素 SICKFLYERS. COM PRESENTS 
软化 Fj: 6 0 一 像素 SU 00 
阴影 
角度 (N): 87 度 
[ 9 ) 团 使 用 全 局 光 (G) 
高 度 : 一 64 度 
和 | 1 口 消 人 锯 占 QD 
高 光 模式 (H): 颜色 减 淡 ~ 
不 透明 度 (0): = 45 % 
阴影 模式 (A): 正片 嗓 底 | 
不 透明 度 (0): Ce 0 wo 
[设置 为 默认 值 “」 | 复位 为 默认 值 | 
光泽 
结构 
混合 模式 (6): 正常 ~ 
不 透明 度 (D): Z5 % SICKFLYERS.COM PRESENTS 


id JAN 20 


距离 O): 5 像素 、 
大 小 (S): 5 像素 


角度 M: (A) 20 一度 


则 局 湖人 锯 占 中 
[= 
等 高 线 : F 团 反 相 @ 


设置 为 默认 值 | 修 位 为 默认 值 


图 案 到 加 
图 案 SICKFIYERS.COM PRESENTS 
混合 模式 (6): 正常 ~ pl 00 
不 透明 度 (人 ): D100 % 站 
图 过 :| 加 国语 |-| 甩 
背 放 (S): - Z5 100  % 
同 与 图 层 诬 接 (9 
| 设置 为 默认 值 | | 复位 为 默认 值 | 四 
22 
投 蜡 
结构 SICKFLYERS. COM PRESENTS 
混合 模式 (6): 正片 县 底 ” 国 国 SUNDAY JAN 20 
不 透明 度 (0): TS 65  % P pe 
角度 (A): (| ) 90 。 度 回 使 用 全 局 光 (G) 
中 高 D): = 一 一 5 像素 
扩展 (R): 4 0 % 
大 小 9): 史 S= > 20 像素 四] 
24 


-人 


# 字 体 


Photoshop APP Ul 设计 从 入 门 到 精通 


人 3 绘制 其 他 文字 使 用 同样 E = ; 
的 方法 制作 其 他 文字 ， 如 图 困 ” 狐 二 二 [ps MOTOR 
国 所 未 。 | [下 *| 不 透明 度 : 


SICKFLYERS.CON PRESENTS iE: 同 中 国 填 齐 : 


属 天 和 由 
再 fr 
| 工 | 疯 几 之 作 \ 


SUNDAY JAN 20 


了 蛮 嘲 之 作 


工 。 蛮 哇 之 作 


ee 


ca 产 . 回 基因 上 国 


14 导入 素材 执行 “文件 > 打 SS 5 下 < 
开 ” 命 令 ， 在 打开 的 对 话 框 中 看 [Psa 加 TB 日 
ged se 2 oo | 正常 :| 不 透明 度 : 
/ SUNDAY JAN 20 -一 一 一 一 
打开 并 拖 入 到 场景 中 ， 如 图 图 -op 和 :加 of 中 BB 。 志和 : [100%[ 
ee | 两 
29 办 IN sw gy E 这 
园 所 不 aarp 0 图 文 


工 说 凡 之 作 


了 工 请 哇 之 在 


15 导入 素材 继续 在 打开 的 对 到 
- 


呈 候 中 Ee ps <， : | 和 : 
将 其 打开 并 拖 入 到 场景 中 ， 如 f Dn | 党 :| 和 要 明 度 : 


图 国 国 所 示 .。 : 0 


“es 
® | 
于 


过 


理工 诱 只 之 作 


16 调整 图 层 在 “图 层 ”面板 
由 设 午 “6 所 中 图 层 的 混合 r 
RS 4 波 29 | \] 天 用] 三 SICKFLYERS CONM PRESENTS 

避 式 ”为 “ 滤 色 ”， 不 透明 度 “ 图 oAY N20 
为 78%， 如 图 国 国 所 示 。 ( 


| 溺 :| 不透明 度 : 


p40 


要 了 涪 岩 之 作 
< 产 回 虱 罚 辐 
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1 7/ 添加 照片 滤 镜 单 击 “ 图 层 ” 
面板 下 方 的 “创建 新 的 填充 或 
调整 图 层 ” 按 钮 ， 在 弹出 的 下 “图 口 由 
拉 有 玉音 中 选择 “照片 滤 镜 ”命令 ， 
在 弹出 的 对 话 框 中 设置 参数 ， 

对 岁 像 的 整体 进行 调整 ， 如 图 
国 所 未 。 | 集 归 明度 


18 添加 色彩 平衡 继续 单 击 
“图 层 ” 面 板 下 方 的 “创建 新 


加 色 兴 平生 


的 填充 或 调整 图 层 ” 按 钮 , 在 弹 | sim:[Hi 
出 的 下 拉 沫 单 中 选择 “色彩 平衡 ” | 静 gm 
命令 ， 在 弹出 的 对 话 框 中 设置 参 并  ” Ne OQ 
数 ， 对 图 像 的 整体 进行 调整 ， 如 | ge 和 2 
图 国 国 困 国有 扩 示 。 i 

IY 埋 贸 明度 


[Y 保留 明度 


19 添加 色 阶 单 击 “ 图 层 ” 面 
板 下 方 的 “创建 新 的 填充 或 调 
整 图 层 ” 按 钮 ， 在 弹出 的 下 拉 
菜单 中 选择 “ 色 阶 ” 命 令 ， 在 
弹出 的 对 话 框 中 设置 参数 ， 对 
图 像 的 整体 进行 调整 ， 最 终 效 
果 如 图 四 贺 所 示 。 
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Photoshop APP U1 设计 从 入 门 到 精通 


6.4 
UI 设计 师 必 读 : 手机 UI 中 的 文字 设计 


Ms i A Ss i hr eh se AN a Yas Yh a Nl 
Ee a a dz ss 
人 需要 各 种 不 同 部 位 的 细节 素材 图 ， 而 有 的 人 需要 你 把 学 体 都 放 在 图 标 中 一 起 切 出 来 。 安 里 开 
发 人 员 拼 命 地 进行 屏 硕 适 配 的 同时 ， 也 要 不 断 寻 求 设计 师 的 协助 。 设 计 师 的 交互 以 及 视觉 工作 
Ee TO 2 Eb od a en ty es NE 4 2 a A A 
既 现 实 义 避免 不 了 的 问题 ， 比 如 ， 厂 资源 库 中 堆积 了 大 量 没 用 的 切 图 ， 要 是 不 伦 好 几 天 时 间 清 
| 
找 切 图 人 员 要 资源 进行 处 理 。 再 比如 ， 开 发 出 来 的 Demo 样 品 ) 与 实际 效果 图 不 从 ， 束 需要 不 
断 检 奋 ， 反 复 修改 ， 以 达到 了 预期 效 末 。 

在 设计 的 过 程 中 ， 我 们 也 应 该 虚心 学 习 ， 随 时 将 目 己 的 困惑 讲 出 来 并 记 下 来 ， 和 别人 及 时 
沟通 、 及 时 请 教 ， 这 样 才能 越 做 越 好 。 


6.4.1 手机 Ul 中 的 字号 


字体 、 了 字体 大 小 “ 即 字 号 ) 和 字体 颜色 在 手机 客户 问 页 和 面 中 无 处 不 在 ， 所 以 在 手机 屏幕 这 


计 意 图 ， 因 此 我 们 必须 了 解 在 利用 计算 机 做 图 的 时 候 采 用 的 学 号 以 及 开发 过 程 中 采用 的 字号 。 

ED As A sa wh 2 Ss A YS A I te A th 
算 机 做 图 与 手机 适 配 的 过 程 中 ， 左 图 是 设计 和 效果， 这 个 页 面 的 设计 表达 的 是 一 个 旅游 选项 ， 我 们 
到 以 看 开办 全 下 入 仙人 2 起 守 和 
中 应 该 突出 体现 “亚洲 ”页 面 的 视觉 效果 。 我 们 在 手机 上 适 配 页 面 的 时 候 ， 要 达到 易 看 的 目的 ， 
国家 列表 的 主 标 题 〈 亚 洲 ) 和 副标题 〈 国 家 名 称 ) 字号 必须 要 有 区 别 。 如 下 左 图 所 示 ， 洲 际 和 国 
家 的 字号 完全 一 样 ， 问 题 束 出 现 了 人， 内 容 矶 中 国家 的 分 量 与 分 类 标题 一 样 就 会 导致 用 户 不 能 一 眼 
看 出 内 容 是 在 各 个 洲际 之 下 的 ， 达 不 到 设计 意图 ， 体 验 效果 不 佳 。 所 以 ， 要 想 解 决 这 个 问题 ， 号 
必须 通过 加 深 洲 际 的 字号 和 底 色 来 加 重 其 分 量 ， 让 国家 的 名 称 包含 在 洲际 中 。 


CARRIER 站 因 鳃 团 @@ 10:30PM CARRIER 站 因 印 四 @ 10:30PM CARRIER 站 国 四 @@ 10:30 PM 

非洲 亚洲 欧洲 美洲 非洲 亚洲 欧洲 美洲 非洲 亚洲 欧洲 ”美洲 
马尔 代 夫 马尔 代 夫 马尔 代 夫 

泰国 泰国 泰国 

马来西亚 马来西亚 马来西亚 

越南 越南 越南 

印度 尼 西 亚 印度 尼 西 亚 印度 尼 西亚 

香港 香港 香 洪 

台北 台北 台北 

巴基斯坦 巴基斯坦 巴基斯坦 


北京 北京 北京 


在 Photoshop 中 设计 的 文字 在 手机 中 适 配 的 效果 调整 后 的 效果 
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炉 酷 字体 


第 6 章 


6. 4.2 ”设计 师 与 程序 员 之 则 的 制作 标准 

通常 用 Photoshop 画 效果 图 时 ， 字 体 大 小 一 般 直 接 以 “点 ”为 单位 ， 然 而 在 开发 中 ， 一 般 采 
用 “sp” 作 单位 ， 如 何 保 证 画图 时 的 字号 选择 和 手机 适 配 效 果 一 致 呢 ? 下 面 以 几 个 常用 应 用 的 
字体 效果 来 说 明 在 Photoshop 和 开发 中 字号 的 选择 。 

(1) 列表 的 主 标题 

一 般 情况 下 ， 列 表 副 标题 的 字号 没有 太 多 的 要 求 ， 只 要 字体 颜色 和 字号 小 于 主 标题 就 可 以 
了 。 腾 讯 新 闻 、QQ 通 讯 录 首页 的 列表 主 标题 的 字号 在 PS 中 应 采用 24~~26 号 左右 ， 一行 大 概 容纳 
16 个 字 。 开 发 程序 中 对 应 的 字号 是 18sp。 


eeeee 中 国电 信 令 10:31 * y+ eeeee 中 国电 信 令 10:29 @@ 腾讯 新 闻 (1) 
要 闻 ”陕西 ”财经 娱乐 体育 | 中 全 水 

影帝 庚 凡 : 我 想 主演 商业 大 片 好 友 分 组 

ER GE | ， aa 

吴奇隆 穿越 娇羞 倚 四 爷 肩 膀 我 的 好 友 
A ne 

张曼玉 这 样 仍 在 创造 。 79 评 国 可 saga studio 
ee di 需要 强调 的 是 :不同 的 字体 
SH os 全 四 | | mrt 即使 字号 相同 ， 显 示 的 大 小 也 会 
请 于 志 基 15 时 出 席 《 探 灵 》 庆 力 不 一 样 。 比 如 ， 同 样 是 16 号 学 的 
国 中 四 E] 楷体 和 黑体 ， 楷 体 就 显得 比 黑体 


新 闻 订阅 图 片 视频 


腾讯 新 闻 


小 一 些 ， 


(2) 列表 的 副标题 

一 般 情 况 下 ， 列 表 副 标题 的 学 号 也 没有 太 多 的 要 求 ， 
昌 

Qe Di na 

正文 学 号 大 小 的 要 求 是 每 行 最 好 少 于 22 个 学 。 因 为 字数 太 多 ， 了 字号 就 小 ， 阅 读 起 来 就 比较 
吃力 。 在 计算 机 中 进行 设计 时 正文 字号 要 大 于 16 号 字体 ， 而 在 开发 程序 中 ， 学 号 设置 要 大 于 12 
写字 。 


2 ee A 


eeeeo 中 国电 信 伺 


《< ”全 部 酒店 


eeeeo 中 国电 信 全 10:33 


< 


eeeeo 中 国电 信 全 10:31 


< 腾讯 新 闻 


《封面 人 物 》 原 创 视频 : 廖 凡 谈 大 器 晚 
成 : 我 有 那么 老 么 ”时 长 约 6 分 钟 。 
腾讯 娱乐 专 稿 ( 文 / 喻 德 术 图 / 薛 建 字 
视频 / 王 栋 责编 /萝卜 ) 


“其 实 我 就 想 找 点 事 儿 干 ， 要 不 人 生 过 
得 太 失 败 了 。” 


这 是 《 白 日 炮火 >》 里 让 雇 凡 很 有 感触 的 
一 句 人 台词 。 他 在 这 部 电影 里 增 肥 二 十 
斤 、 留 了 大 胡子 ， 穿 着 衰 成 一 大 团 的 棉 
衣 ， 扮 演 一 个 落魄 又 但 强 的 小 城 警察 。 
就 像 一 个 隐喻 ， 出 演 《 白 日 焰火 > 这 个 


201® 


腾讯 新 闻 APP 正 文 


¥0 


立即 抢购 


PlayStation 4 次 时 代 主 机 免费 送 


震撼 逼真 高 品质 游戏 画面 ,深度 愉快 体验 , 核 
心 玩 家 心动 之 选 ! 索 尼 PS4 点 评 团 免费 送 | 
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外 观 设 计 巧 妙 ， 棱 角 分 明 ， 
吸入 式 光 驱 ， 时 尚 简 洁 大 方 。 

DS4 游 戏 手 柄 ， 按 键 触 感 提 升 ， 
高 清 分 辨 率 ， 逼 真 游戏 画面 ， 
轻松 记录 游戏 进程 ， 一 键 分 享 。 


点 评 团 免 费 送 索尼 PS4(PLAYSTATION 4) 游 戏 神 


入 会 


大 从 


Wp 


Q 搜索 身边 的 酒店 
西安 市 莲 湖区 南 二 环 路 


血 城市 北京 


2014-03-21 周 五 
2014-03-22 周 六 


不 限 星 级 不 限 .… 


搜索 


图 担保 通 ， 酒 店 预订 全 程 保障 


去 哪儿 旅游 APP 正 文 


] 作 


本 章 主 要 收录 了 4 个 小 国标 以 及 1 个 整套 图 标的 实战 案例 ， 这 
些 国标 多 为 时 下 非常 流行 的 简约 风格 ， 主要 是 利用 圆 角 矩形 、 
梢 贺 、 钢 笔 等 多 种 夭 量 工 具 综 合 绘 制 而 成 的 形状 。 通 过 本 章 的 
学 习 避 以 使 读者 熟练 学 握 使 用 矢量 工具 进行 APP 图 标 设 计 的 相 
关 技 术 。 


简约 风格 表现 
大 时 
整体 风格 统一 
图 标尺 十 


第 7 章 ”简约 1CON 制作 


@ 光盘 路 径 
Chapter07/Media 


联系 人 图 标 制作 


联系 人 图 标 是 手机 上 必 不 可 少 的 工具 图 案 ， 在 其 中 存储 着 电话 、 手 机 
等 通讯 设备 里 可 供 联系 交流 的 人 名 单 。 联 系 人 图 标 作 为 手机 的 基本 功能 之 
CS4 CS5 CS6 CC 一 ， 每 天 都 被 人 们 频繁 地 使 用 着 。 


MW/s]esjle)a 


本 例 制作 一 个 联系 人 图 标 。 在 设计 过 程 中 冯 先 使 用 浅 蔓 色 和 噩 光 制 作 清新 的 背景 ， 其 钦 
使 用 钢笔 工具 绘制 同色 系 的 人 形 图 标 ， 最 后 在 整体 边框 外 加 上 白色 圆 环 ， 整 个 图 标 营 造 出 清 
新 、 人 条 洁 的 氛围 。 


OOT 新 建文 件 执行 “文件 > 一 

新 建 ” 命 令 ， 或 按 快捷 键 Re ER 

CE LO a Be A 颜色 模式 (M): RGB 颜色 ”> 8 位 ~ 

对 话 框 中 创建 222X201 像素 的 背景 内 容 (C): 白色 - 

文档 , 完成 后 单 击 “ 确 定 ” 按 钮 ， 人 高 级 

如 图 团 加 所 示 。 颜色 配置 交 件 (0): 工作 中 的 RGB: sRGB 正 C6196.， ~ 
像素 长 宽 比 (X): 方形 像素 M 


OZ 绘制 背景 双击 “背景 ” 这 


图 层 ， 将 其 转换 为 普通 图 层 ， pm WOTHG 
设 前 景色 为 深蓝 色 (R: 40， 名 一 不 对 明度 : |100%| -| 
G: 46, B: 58) ， 按 快捷 键 EE B 填充 : |100%| ”| 
<Alt+Deletey 键 填充 颜色 ， 如 =” 国 ss， 


图 加 国 所 不 。 


3 六 回 更 . 国 辐 


-1 


Photoshop APP UI 设计 从 入 门 到 精通 


OO3 绘制 李 圆 单 击 工具 箱 中 
的 “椭圆 工具 ”， 在 选项 栏 中 
选择 工具 模式 为 “形状 ”， 设 


I a 内 阴影 
ys ee a 结构 

Hl | 混合 模式 介 ): 正片 亚 底 ~ 国 国 
BHA Be DA ha el BA a> 不 通明 度 (O): Ai 而 % 
键 在 页 面 中 绘制 正 贺 ， 双 击 该 负 度 A): (”) 9 度 加 使 用 全 局 X(6) 

距离 人 )，T >” 了 像素 
图 屋 ， 在 弹出 的 “图 层 样 式 ” 阻塞 (0: 一 0 % 
] 6 号 2 722 、 a Se 
对 话 框 中 选择 “内 阴影 ”选项 ， 
上 @ -||| 天 :| 壤 计 : 国 则 括 b:looo 点 | 一直 W: [12 伍 9 下 [112 僵 ] | 日 芭 埠 | 交口 07 | 


设 症 参数 ， 为 其 添加 效果 ， 如 
多 国 国 园 所 示 。 


〇 4 绘制 高 光 单 击 工 具 箱 中 


Fy ED te oe i PU : 


选择 开具 模式 为 “形状 ”， 设 | EE 党 。 。 。。。] 十 雪 明 度 : [15% | 
前 景色 为 白色 。 在 页 面 中 绘制 议定 : 回 sf 中 日 坟 充 : [100%] 
形状 ， 将 该 图 层 的 图 层 名 称 修 © | | 
改 为 “高 光 ”， 在 “图 层 ” 面 \ : 加 a 

板 中 设置 该 图 层 的 不 透明 度 为 Do i 

15%， 如 图 辆 国 所 示 。 rhna es 


.加 从 .向 国 


0 〇 5 给 制 人 物 形状 单 击 工具 箱 
Pe A ,er 
a he A WR 
WH Cy ws EE RO 
652 BN OD a 2 A 内 阴影 


结构 


物 形状 ， 双 击 该 图 屋 ， 在 弹出 混合 模式 (5)， 正 党 - 国 本 


不 透明 度 (0): Re 7 % 


的 ] 图 必 样 ll i 对 证 杠 中 选 角度 (A): | 人 | 90 度 加 |] 使 用 全 局 光 (G) 

3 ED: 5 一 一 7 人 
阻塞 (0): 人 ee () % 

数 ， 为 其 添加 效果 ， 如 图 四 大 小 5): 4 一 一 一 0 人 

加 所 示 。 
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O06 添加 外 框 使 用 同样 的 方 
法 ， 制 作 和 白色 外 框 ， 参 数 设 置 
如 网 国 所 示 ， 最 终 效 果 如 图 国 
所 示 。 


第 7 章 简约 1CON 制作 


@ 光 盘 路 径 


Chapter07/Media 


搜索 图 标 制作 


搜索 图 标 是 手机 、 计 算 机 上 经 常 使 用 的 工具 图 案 。 设 计时 应 该 让 用 户 
ee 看 到 图 标 就 能 够 感知 、 想 象 、 理 解 其 售 义 。 这 种 和 带 有 放大 镜 形 状 的 搜索 图 
CS4 CS5 CS6 CC 标 是 当前 最 基本 的 ， 也 是 最 广为人知 的 搜索 图 标 。 


本 例 制 作 的 古 搜索 图 标 。 肯 和 完 设计 师 选 用 的 是 放大 镜 形 状 的 搜索 图 标 ， 其 次 选用 圆 角 算 
形 绘 制 较 圆 滑 的 手柄 ， 手 顶 的 磊 色 选用 的 是 颜色 鲜 攀 的 暧 色调 ， 最 后 绘制 出 同样 闫 色 鲜 艳 的 
暖色 调 放大 镜 镜 体 。 这 种 暖色 调 的 设计 使 得 搜索 图 标 看 起 来 既 可 爱 义 抓 人 眼球 。 


*、 ® ® 
0 〇 1 新建 文件 执行 “文件 > 


新 建 儿 命令 ,或 鬼 快 捷 键 
Re 


宽度 (W): 232 Me 
对 话 杠 中 创建 202 KD 像 a 226 大 = 
系 的 文档 , 完成 后 单 击 4 确 定 ” 分 状 率 (R): 72 仿 素 /英寸 
je 钾 | 加 图 所 示 | 颜色 模式 (M): RGB 颜色 ~ 8 位 = 
背景 内 容 (C): 白色 

人 | 高 级 


颜色 配置 文 件 (D): 工作 中 的 RGB: sRGB IEC6196... 
帘 EE 下 
像素 长 宽 比 (X): 方形 像素 


(OZ 绘制 背景 双击 “背景 ” 
图 层 ， 将 其 转换 为 普通 图 层 ， 


Pp :| 加 交工 吕 明 目 


设 前 景色 为 深蓝 色 (R: 40， > Ti 明度: 100% | ~ | 
G: 46, B: 58) ， 按 快捷 键 证: 四 of 中 B 。 坟 计 : [100%| | 


[| 
<Alt+Deletey 填充 颜色 ， 如 图 © | | 图 层 0 
加 所 示 。 


和 国 症 


Photoshop APP UI 设计 从 入 门 到 精通 


0 〇 3 绘制 手柄 单 击 工具 箱 中 


Foy oes Ua es ae a Pa :| 四 TB 日 
选择 开具 模式 为 “形状 ”， 设 me | 不 通明 度 : ee 


六 景色 为 灰色 CR: 227, 0G: 
DA BE: 252 ee 
手柄 形状 ， 将 图 层 名 称 修改 为 
“手柄 ”， 如 图 国 国 所 示 。 


4 绘制 手 把 使 用 同样 的 方法 


图 层 三 
制作 手 把 ， 如 图 团 国 历 示 。 LpP 闭 让 回力 工 蕊 遇 
医 
iiE: 回 sf 中国 


| # | 
上 区 


四 | 日 丙 


Pl 
3 加 人 向 国 


0 〇 5 绘制 椭圆 单 击 工 具 箱 中 
的 “椭圆 工具 ”， 在 选项 栏 中 pa 加 TO 日 
2 TO 0 ya [EE 常 。 | 胡 明 度 : [100%| ”| 
前 景色 为 白色 ， 按 住 《Shift> 计 定 : 加 sf 中 看 境 吉 :ll00%| "| 
键 在 页 面 上 绘制 正 圆 ， 如 图 四 ] 
四 所 不 。 


6 绘制 正 圆 继续 使 用 “椭圆 

en ee 

te NN a i HU ey 

Ae Re 2 Ge 00 

146) ， 按 住 <Shift> 键 在 页 面 

上 绘制 正 圆 。 双 击 该 图 屋 ， 在 

弹 出 的 6 图 层 样 式 ” 对 话 框 中 混合 模式 (6): 正片 到 底 ~ 国 国 


不 透明 度 (0): 有 % 
选择 “内 阴 景 rn, 六 直人 参数 角度 (9): | ， | 90 度 回 使 用 全 局 光 (G) 
为 其 添加 效果 ， 如 图 国 所 示 。 Sn 
最 终 效 果 如 图 为 所 示 。 aaa J 


第 7 章 简约 1CON 制作 


@ 光盘 路 径 


Chapter07/Media 


照相 机 图 标 制作 


照相 机 简称 相机 ， 是 一 种 利用 光学 成 像 原理 形成 影像 并 使 用 抵 片 记录 


影像 的 设备 。 照 相机 图 标 是 手机 上 经 常 使 用 的 工具 图 标 ， 如 今 该 类 图 标 素 


M/s ts}le)n 


CS4 Cs5 CS6 CC 材 已 经 干 变 万 化 ， 各 种 元 素 痢 可 以 拿 来 作为 图 标 设 计 样 式 。 


设计 师 采 用 摄像 头 正 面 角度 来 表现 照相 机 正在 对 看 观众 担 摄 ， 给 人 一 种 身 临 其 境 的 感 
党 。 设 计时 先 制 作 浅 色 的 背景 ， 然 后 通过 鲜艳 的 颜色 表现 相机 机 身 ， 最 后 通过 圆 背 套 圆 圈 的 
构图 手法 来 表 现 摄 像 头 的 层次 感 和 镜头 感 。 


-El [【@) 


O 1 新 建文 件 执行 “文件 > 新 
建 和 命令 ,和 三 强 出 的 汤 建 ” 
对 话 框 中， 狐 建 一 个 宽度 和 高 
度 分 别 为 800 X600 像素 的 空白 
J el a te EE 
钮 结束 ， 设 前 景色 为 黄色 〈R: 

2o30) CD 1 
捷 键 ALt+Deletey> 填充 颜色 ， 


如 图 四 贺 所 示 。 
〇 2 绘制 贺 角 矩形 单 击 工具 栏 。 雪 
中 的 “ 圆 角 和 矩形 工具 ”按钮 ， 7 


在 选项 栏 中 选择 工具 的 模式 为 
“形状 ”， 设 置 填充 为 白色 ， 
半径 为 80 像素, 绘制 圆 角 和 矩形 ， 
如 图 加 贺 所 示 。 


[ppd 


Photoshop APP UI| 


OO3 绘制 贺 角 矩形 单 击 工具 栏 
中 的 “ 圆 角 和 矩形 工具 ”按钮 ， 

在 选项 栏 中 选择 工具 的 模式 为 
“形状 ”, 设置 填充 为 浅 灰 色 ( 
IA ON NG eA DD 

半径 为 80 像素 , 绘制 圆 角 和 矩形 ， 
如 图 国 轩 所 示 。 


〇 4 绘制 矩形 单 击 工具 栏 中 的 
“和 埠 形 开具 ”按钮 ,| 在 选项 栏 
Fo a de bt A 
De EL ER 2 BG 

3 OO 
多 加 困 所 示 。 


0 〇 5 绘制 右上 方 酉 圆 单 击 工具 
栏 中 的 “椭圆 工具 ”按钮 ， 在 
选项 栏 中 选择 工具 的 模式 为 
| 有 形 典 员 骂 四 是 人 多 为 守 色 IOR 
Dd es apes es 
右上 方 绘 制 椭圆 ， 如 图 加 
所 示 。 


O06 添加 描 边 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 下 拉 沫 单 中 选择 
0 ne, 
加 描 边 效 果 ， 如 图 国 因 所 示 。 


0 〇 7 绘制 中 间 椭 加 单 击 工 具 栏 
ya | 3 ea 
项 栏 中 选择 工具 的 模式 为 “ 形 
状 ”， 设 置 填充 为 灰色 (R: 
228, G0 D8 B22 ner, 
间 绘 制 椭 贺 ， 如 图 因 田 所 示 。 


设计 从 入 门 到 精通 


撞 边 

拷 构 -- 
大 小 (S) :PSP 6 僚 素 
位 置 (PF): 外 部 v 

汤 合 模式 (6B) : 正常 M4 


不 透明 度 (0) : 天 2D 100 % 


” 坪 充 兴 型 (F): 翅 色 vv 


二 色 : | 
ly 加 


EE 
[BS) 
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0 〇 8 绘制 由 心 椭圆 单 击 工 具 栏 
中 的 “椭圆 工具 ”按钮 ， 在 选 
项 栏 中 选择 工具 的 模式 为 “ 形 
状 ”， 设 置 填充 为 深 灰 色 〈R: 
eG Da | eee 
一 步 绘 制 的 椭圆 中 再 绘制 一 个 
椭圆 ， 如 图 国 四 所 示 。 


(0 〇 9 添加 内 阴影 单 击 “ 图 层 ” 
面板 咒 员 的 由 而 图 属 符 是 1 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 内 阴影 ”选项 ， 设 置 参数 ， 
添加 内 阴影 效果 ， 如 图 国 因 
所 示 。 


1 0 绘制 酉 圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
Fe de Cs NAT J 
设 症 填充 为 灰色 (R: 136，6G: 

136，B;136) ,绘制 椭圆, 如 
图 因 四 所 示 。 


1 1 绘制 椭圆 单 击 工具 栏 中 的 
“ 顶 圆 工具 ”按钮 ， 在 选项 栏 
设 痢 填 充 为 灰色 (CR: 117，6: 

加 7 B10 给 而 本 吕 ] ,| 
图 团 团 所 示 。 


112 绘制 椭圆 单 击 工具 栏 中 的 


“椭圆 工具 ”按钮 ， 在 选项 栏 


A 
设 转 填充 为 灰色 (R: 158，6G: 
158，B: 158) ， 绘 制 椭 贺 ， 如 
图 图 园 所 示 。 
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兴 隔 影 


蔡 构 


源 合 模式 (5B) : 
不 透明 度 (0) : 


遍 度 (4) : 


距离 {D) : 
阻 守 (C) : 
大 小 (S) : 


© 
到 - 国 
DA 20 2 


eS ) 120” 度 贺 使 用 全 局 光 (G) 


0 


O 0 % 


6 0 像素 


Photoshop APP Ul 设计 从 入 门 到 精通 


Level 


Mssle]n 
CS4 CS5 CS6 CC 


@ 光盘 路 径 
Chapter07/Media 


则 钟 图 标 制作 


fz 人 玫 Try 一 一 YL _ Tv 
= [Tv 三 Ea = 

中 | 人 二 大 曲 Hz | 三 EW 

只 | 用 大 咱 2 =z 


亲 钟 是 市 有 闹 铃 闻 置 的 钟表 ， 既 能 显示 时 间 ， 义 能 按 人 们 预定 的 时 刻 


发 出 声音 提示 信号 或 其 他 信和 号。 闹钟 是 手机 上 和 帅 见 的 工具 ， 人 们 在 清晨 的 
间 钟 声 中 醒 来 ， 也 通过 它 来 设置 各 种 提醒 。 


本 例 是 闲 钟 图 标 制 作 。 设 计 师 采用 渐变 登 加 和 投影 来 制作 闹钟 底座 ， 之 后 用 光影 表现 出 
亲 钟 底座 的 塑料 质感 ， 再 通过 白色 金属 质感 的 闹钟 圆 盘 来 衬托 立体 感 ， 最 后 绘制 出 精细 的 刻 
度 和 指针 ， 客 造 出 精准 的 氛围 。 


O1 打开 文件 执行 “文件 > 打 本 
开 ” 命 令 ， 在 弹出 的 “打开 ” 
对 话 框 中 选择 相应 的 素材 文件 
并 导入 ， 如 图 加 加 所 示 。 Eh 


〇 2 绽 制 圆 角 甜 形 单 击 工具 栏 
中 的 “ 圆 角 和 矩形 工具 ”按钮 ， 
在 选项 栏 中 选择 工具 的 模式 为 


图 后 | 外 | 
| 户 类 型 | 

I :| 不 通明 度 : |100%| ~ | 
We: 国 ,8 i: [0%[-] 


过 以 后 


| 


Re Yo a Rs: 
2371, G: 3, B: 2» 9 | 全 
为 10 像素， 绘制 圆 角 矩形， 如 


各国 园 所 未 。 
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(03 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样 式 ” 
按钮 ， 在 弹出 的 下 拉 荣 单 中 选 
择 “ 渐 变 三 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 嫩 加 效果 ， 如 图 
因 所 未 。 


〇 4 添加 投影 单 击 “ 图 层 ” 面 
pa a 0 as 
钮 ， 在 弹出 的 下 拉 荣 单 中 选择 
“投影 ”选项 ， 设 置 参数 ， 添 
加 投影 效果 ， 如 图 园 国 所 示 。 


〇 5 绘制 椭圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
oe dP eh zy DR 
设置 填充 为 米黄 色 CR: 245, G: 
245，B: 245) ,绘制 椭圆 ， 如 
图 国 四 所 示 。 


0 〇 6 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 渐 变 登 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 有 释 加 效果 ， 如 图 
回 所 示 。 


〇 了 添加 投影 单 击 “ 图 层 ” 面 
板 店 方 有 时“ 深 加 图 屋 样式 ”i 按 
钮 ， 在 弹出 的 下 拉 荣 单 中 选择 
“ 投影” 选项， 设置 参数 ， 添 
加 投影 效果 ， 如 图 困 四 所 示 。 


图 层 


渐变 亚 加 

渐变 

混合 模式 (O): 亚 加 v 回访 色 
不 透明 度 Pp)，eeo 55 % 


i 1v| T&R) 


样式 (0): 线性 ~ 园 与 图 层 对 齐 人 四 
角度 (N): | * | 90 度 
缩放 (SS): - 100  % 
| 设置 为 默认 值 | | 复位 为 默认 值 | 
投影 
混合 模式 (6): 正片 到底 ~ 国 国 
不 透明 度 (D): Z5 25 % 
角度 (A): | ， | 90 ” 度 回 使 用 全 局 光 (G) 
距离 (0): 后 5 ”像素 
扩展 (R): 0 % 


太 小 (5): 严 5 像素 


二 Ci 


IP 到 3| 加 交工 宫 曙 目 


| | 
:加 of 中 个。 请 [no 


| | -~ 
地 J 四 
上 情 圆 1 
@@ | 同 圆 角 jEf 1 到 
局 效果 | 
他 靳 变 杰 加 | 
所 回 台 白 回 茄 区 
新 变 秋 加 
新 变 
混合 模式 (0): 到 加 =| 回 仿 色 


不 透明 度 (P): ES 55 % 
i [| T&R) 
样式 (LD): 线性 加 与 图 层 对 齐 ( 
角度 (N): | 4 | 90 度 
缩放 (5): = 100 “加 


投影 
混合 模式 @): 正片 到 底 ~ 国 国 
不 透明 度 (D): 看 55 % 


角度 :人 *， | 90 度 回 使 用 全 局 光 (G) 


中 高 Dj: 人 一 一 了。 你 
扩展 (R): 人 0  % 
大 小 (5): 全 2 像素 


[ly 
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Photoshop APP Ul 设计 从 入 门 到 精通 


08 复制 椭圆 单 击 “ 彬 圆 1” | 于 天 
or a 交 攻关 
图 层 复制 局 右键 单 击 图 | 正常 二 刷 肚 明度 : |100% | ~ | 


裤 定 : 网 yf 中 填充 : [100% | "| 
层 ， 在 弹出 的 快捷 菜单 中 选择 ee < 


过 李 圆 1 拷 风 

6 VY 3 Ds Da | 

Yi | EN he i 0 | a i 

1 Le . 

《Ctrl+T> 组 合 键 缩放 椭圆 ， 按 
《Enter> 键 结 束 操 作 ， 如 图 因 色 渐变 可 加 | 
困 所 示 。 3 灰 . 回首 .外 晤 站 及 
O9 添加 内 阴影 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样 式 ” 人 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 混合 模式 (8) 正片 又 底 - 国 
择 “ 内 阴影 ”选项 ， 设 置 参数 ， 不 和 有 C0}: “ 呈 32 四 
| yal 角度 (A): (4) 四 电光 
添加 内 阴影 效果 ， 如 图 国 Di 中 

i 距 高 D): 一 一 1 像素 
a 阻塞 (0): 4 0  % 


大 小 (5): 于 一 一 一 一 一 像素 


1 0 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” “站 柱 亚 加 


渐变 


和 混合 模式 (0): 正常 > 同 仿 色 
择 “ 浙 变 炙 加 ”选项 ， 设 置 参 。 Tm 碾 


节 朗 :| 友和) 
数 ， 添 加 渐变 三 加 效果 ， 如 图 样式 0;， 线性 > 同 与 图 层 对 齐 四 


团 所 示 。 前 度 (N): | 4 | 90 度 


缩放 人 ):， 一” 10  % 


1 1 复制 顶 圆 单 击 “ 椭 圆 1” 二 | 过 疙 | 路 | 二 
图 层 ， 按 Ctrl+J> 组 合 键 将 | 业 时 OTIS 
图 层 再 复 制 一 层 。 右 键 单 击 图 | 一 一 
层 在 弹出 的 快捷 菜单 中 选 掺 | 
WE ”EE 


| | 加 于 局 出 贺 1 持 风 tr 
《<Ctrl+T> 组 合 键 缩放 李 圆 ， 按 他 效果 
“Enter> 键 结束 操作 ， 如 图 团 一 上 
园 所 示 。 5 产 . 回 瑟 . 四 辐 和 苗 了 觅 


1 2 添加 描 边 单 击 “ 图 层 ” 面 . 指 4 
板 下 方 的 “添加 图 层 样式 ” 按 ”ww 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 位 置 p): 内 部 ~ 


sy oa es | 法 混合 模式 伯 ): 正常 
手边 ”选项 ， 设 置 参 数 ， 汤 不 透明 度 (D): 一) 100 
加 摘 边 效果 ， 如 图 国 团 所 示 。 


填充 类 型 ff): 颜色 
颜色 ; R: 209 
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1 3 绘制 憩 形 单 击 工具 栏 中 的 
定形 山 具 人 按钮 ,在 选 项 栏 
od de he NA WR, 
设置 填 双 为 深 灰 色 〈R: 51，6G: 
BB | si Sy | hn he] 
困 所 未。 


14 绘制 刻度 按 下 “Ctrl+C> 
组 合 键 ， 再 按 《CtrlL+V> 组 合 键 
SA Oo > 全 褒 
旋转 矩形 ， 之 后 按 Enter> 键 结 
束 操作 。 按 《Shift+Ctrl+Alt+T> 
组 合 键 ， 旋 转 并 复制 矩形 ， 以 同 
样 方法 绘制 分 针 刻 度 ， 如 图 园 
图 所 未 。 


15 绘制 时 针 单 击 工具 栏 中 的 
ee i 
ed EL Nb RY 
设置 填充 为 深 灰 色 (R: 102, G: 
O28 :O21 
双击 图 层 ， 在 打开 的 “图 层 样 
0 
设 管 参数 ， 如 图 园 国 所 示 。 


16 添加 投影 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样 式 ” 按 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 
“投影 ”， 设 置 参数 ， 添 加 投 
影 效果 ， 如 图 国 园 所 示 。 


人 7 绘制 秒针 和 分 针 形状 单 击 
工具 栏 中 的 “钢笔 工具 ”按钮 ， 
在 选项 栏 中 选择 工具 的 模式 为 
“形状 ”， 设 置 填充 为 黄色 
人 
绘制 分 针 形状 。 之 后 复制 图 层 ， 
选择 “渐变 站 加 ”选项 ， 以 同 
样 方法 绘制 秒针 形状 ， 如 图 图 
国 所 示 。 


新 变 秋 加 
源 变 
混合 模式 (0): 亚 加 ~ 回访 色 
不 通明 度 P): 一 10 % 
洒 交 : |[v| | 掺 (rR) 
样式 0): 线性 ~ 加 与 图 层 对 齐 人 
角度 (Wy: ( 4 ) 65 度 


缩放 ():， PS 100 % 


男 男 
R: 28 R: 123 
G: 28 加 G23 0 
B28 B: 123 
投影 
结构 


混合 模式 (6): 正片 又 底 ~ 国 国 
不 透明 度 (D): 一 Ce 35  % 


角度 (A): | 、 | 120 ” 度 问 使 用 全 局 光 (G) 
中 高 D): 天 一 2 像素 

扩展 R): < 0 一 % 
大 小 人 ): 下 4 像素 


简约 1CON 制作 


= — 
se 下 一 


图 层 | 归 据 | 明和 福 a 
| 型 :| 回力 工 写 男 目 
| 下 :| 不 透明 度 : [100% | | 
和 :四 中 Bet: [00%[ 


[eam | 
[esa 


@@ | 疗 本 圆 1 拷 风 2 fe 
他 效果 
他 描记 


5 加 关 . 向 加 站岗 


雪 


Photoshop APP Ul 设计 从 入 门 到 精通 


1 8 绘制 本 贺 单 击 工 具 栏 中 的 。 “4 
a en 
人 Ra 二 一 
设置 填充 为 黑色 ,绘制 椭圆 。 填充 类 型 ): 渐变 ~ 

双击 图 层 ， 打 开 “ 图 层 样 式 ” Er 


对 话 框 ， 选择 中 描 边 ” al 角度 (A): | | 125 度 | 仿 色 
六 剖 参 收 ， 如同 困 国 捉 下。 


1 9 添加 图 层 样式 单 击 “ 图 展 ” 4a 
面板 | 且 W 力 吕 和 | 案 二 混合 模式 (0):， 正常 ~ 回 仿 色 


不 透明 度 P): 2 75 % 


按钮 ， 在 弹出 的 下 拉 菜 单 中 选 XXX [AGREE 团 反 向 (R) 
择 ¢¢ 渐 恋 番 加 9》 和 6 投影 22 选 样式 (0D): 线性 加 3 7 
[a | 角度 (VW: (SS 度 
项 ， 设 置 参 数 ， 添 加 相应 效果 ， 
Wu 痪 放 (S); 一 一 一 一 100 936 
如 图 国 图 国 所 示 . 投影 
结构 
混合 模式 (6):” 正片 县 底 ~ 国 国 
不 透明 度 (o): A 35  % 


角度 (A): | ”120 ” 度 回 使 有 全 局 光 (G) 


距离 D): 上 一 2 ”像素 
扩展 (R): Ce 0 % 


大 小 (5): 4 像素 


牛 过 
20 绘制 椭圆 单 击 工具 栏 中 一 纯 

吕 wy Wt 大 小 6): GT 2 ”信康 
的 “椭圆 工具 ”按钮 ， 在 选项 栏 位 置 P):， 居 中 ~ 


Eo 
设置 填充 为 黄色 (R: 255，G: 填充 类 型 Fj) 潭 变 

NI | 本 \ EE ly 
0000 | es I 


真 色 小 圆 咱 双击 图 属 , 打开 “图 角度 (A): (人 225 一度 问 仿 色 
层 样 式 ” 对 话 柜 ， 选 择 “ 措 边 ”mg 可 
选项 , 设置 参数 , 如 图 四 辆 所 示 。 se 40 


全 Bi 2 BoB 2 ome 


人 1 绘制 形状 单 击 工 具 栏 中 的 
Se | er 
中 选择 工具 的 模式 为 “形状 ”， 
绘制 形状 ， 设 置 图 层 的 填充 为 
100%， 如 图 加 国 押 示 。 


Bp 有 TO 田 目 
| 下 党 。” ”| 太 和 明度 : |100%| -| 
田 so 只 自 培训 :|100%|-| 
© | 局 HKs > 
@@ | 届 开具 4 fr 
©® | 3 fr > 


A, | | TT 一 上 + rr 
5 产 . 回 瑟 . 四 加 曾 8 
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2 添加 描 边 单 击 “ 图 层 ” 面 癌 
S 、 、 ja 大 小 (5): 5 2 像素 
板 下 方 的 “添加 图 层 样 式 ” 按 ngey 一 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 3 天 
“ 措 廊 ”和 庭 项 ， 认 于 参 尖 wu 不 透明 度 (O): 100  % 
Pi al nl, 设置 参数 ， 添 
填充 类 型 F): 渐变 ~ 


加 摘 按 效 末 ， 如 图 上 所 示 。 亲友 : E 本 了 | 口 所 和 w) 
样式 ()， 线 性 ~” 加 与 图 局 对 齐 (6) 
角度 A): (上 ) 55 ” 度 。 回 伪 色 


加 加 
国 国 QO 全 口外 鱼 便 
R: 17 R: 104R: 134R: 220 R: 184R: 255R: 142R: 142R: 114 
G: 17 6: 1046: 1346: 220 G: 184G: 255 6: 142G: 142G: 114 
B: 17 B: 104B: 134B: 220 B: 184B: 255B: 142B: 142B: M44 


3 添加 内 阴影 单 击 “ 图 层 ， 
产 Jr S S 内 阴影 
面板 下 方 的 “添加 图 层 样式 ” 结构 
殷 胡 4 强 如 | 站 拉 芝 加 | |。 滥 合 柜 式 69 正片 有 - 国 国 
3 
| | il 角度 (A): | | 115 度 同 使 用 全 局 光 (G) 


次 加 内 阴影 效果 ， 如 距离 D): 一 


3 像素 
所 示 。 阳 塞 人): 一 0  % 
大 小 (5): 里 5 像素 


24 添加 投影 单 击 “图 层 ” 面 

板 下 方 的 “ 滩 而 图 层 样式 中 接 | 各 

钮 ， 在 弹出 的 下 拉 菜 单 中 选择 混合 模式 (6)， 正片 又 底 ~ 国 硬 

“投影 ”选项 ， 设 置 参数 , 添 “” 个， 
角度 (A): | |】 90 度 癌 ] 使 用 全 局 光 (G) 


加 投影 效果 ， 如 图 图 四 所 示 。 


距离 OO): 点 3 像素 
扩展 R): CS 0 % 
大 小 (5S): 63 0 像素 


2D 滨 加 文字 单 击 工具 箱 
中 的 “ 横 厂 文字 工具 ”， 在 
选项 栏 中 设置 字体 为 Arial | 党 :| 入 矣 明度 : [100%| "| 
Regular， 字 号 为 “18”， 颜 色 议定 : 加 of 中 四 填 达 :|loo%| 
为 棕色 (R: 91, G: 60, B: 0) ， 国 本 - 
输入 相应 文字 。 之 后 右键 单 击 : 
文字 图 层 ， 在 弹出 的 快捷 菜单 
中 选择 “创建 剪贴 蒙 版 ”选项 ， 
如 图 团 国 所 示 。 


rT 3 


多 | TT 8 


® | 5 
过 落果 
过 招 蓉 
5 加 心 | 生 | 里 
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@ 光盘 路 径 
Chapter07/Media 


| = 
mm FH 一口 9 
I2| |) | EE IS2 = 


就 一 个 手机 界面 来 说 ， 图 标 设计 即 是 它 的 名 片 ， 更 是 它 的 灵 强 所 在 ， 
oo ty 0 ea | et es Eph wes bh i es oR RR G0 | er 


2 果 ， 一 定 要 在 保证 差异 性 、 可 识别 性 、 统 一 性 、 协 调 性 原则 的 基础 上 进行 
CS4 CS5 CS6 CC 操作 


Level 


本 例 是 制作 简约 平面 图 标的 整 僚 设 计 。 因 为 整套 图 标 设计 需要 保证 风格 统一 ， 所 以 本 例 
中 设计 师 选 择 的 风格 是 简约 二 维 效 末 。 本 例 中 的 图 标 主要 以 铭 层 的 不 同 堆积 技巧 从 而 完成 设 
计 的 ， 同 时 ， 每 个 图 标的 色彩 风格 也 是 保持 高 度 统 一 的 。 


OO 1 新 建文 件 执行 “文件 > 新 
or 
3 Ee 
分 别 为 800X600 像素 的 空白 文 
档 ， 完 成 后 单 击 “ 确 定 ” 按 钮 
结束 ， 如 图 团 加 所 示 。 


O2 填充 颜色 设置 前 景色 为 浅 
BR A DG oD BL 
21990 el < Alt Deletey eH 
合 键 填充 前 景色 ， 如 图 辆 
所 示 。 
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0 〇 3 绘制 形状 1 单 击 工具 栏 
es ue le 
项 栏 中 选择 工具 的 模式 为 “ 形 
TAN a se Ey hh A Et IIR, 
po lous es ns ap a 
形状 1， 如 图 贺 加 所 示 。 


0 〇 4 绘制 形状 2 单 击 工 具 栏 
Be Wa a a 
Se 
状 ”， 设 置 填充 为 黄色 (R: 
OM | Oe ea 2 OG De 
形状 2， 如 图 国 加 所 示 。 


0 〇 5 绘制 形状 3 单 击 工具 栏 
Po ee i | En 
项 栏 中 远 择 工具 的 模式 为 “ 形 
状 ”， 设 置 填充 为 黄色 (R: 
OL I OA BG ta a 
形状 3， 如 图 国 四 所 示 。 


06 绘制 形状 4 单 击 工具 栏 
中 的 “钢笔 工具 ”按钮 ， 在 选 
se 
状 ”， 设 置 填充 为 黄色 (R: 
DB GO GD 
形状 4， 从 而 完成 了 本 图 标的 
制作 ， 效 果 如 图 国 因 所 示 。 


(OO 7 绘制 贺 角 矩形 下 面 再 新 设 
计 一 个 图 标 , 单 击 工具 栏 中 的 “ 圆 


角 和 矩形 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 
半径 为 30 像素, 绘制 贺 角 矩形 ， 
如 图 图 四 万 示 . 
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[ 医 二 :| 不 各 明度 : 
辐 十 - 加 2 出 六 填充 : 
i i 


| 弄 状 1 
上 是 2 


© | | 二 所 


| 正常 不 迁 明 度 : [i00%| = | 
钙 定 : 加 of 只 看 填充 : [i008] -| 


[各 福全 
多 加 sf 中 BB。 过: [E009] 
ee 3 

[sae 
a 


弄 牧 4 


| 
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| 海 变 生 部 

〇 8 添加 渐变 要 加 单 击 “ 图 层 ” “二 
CE em 

按钮 ， 在 弹出 的 下 拉 菜 单 中 选 = BR 

择 “ 浙 变 友 加 ”选项 , 设置 参 人， 
数 ， 添 加 渐变 奢 加 效果 ， 如 图 A 100 % 


因 所 示 。 8 

R: 147 编 R: 183 

有 1 B: 174 
O9 绘制 贺 角 矩形 单 击 工具 栏 py 通道 | 路径 : 

次 9 芝 和 型 | 国 关 本 了 疼 

中 的 “ 圆 角 和 矩形 工具 ”按钮 ， 
在 选项 栏 中 选择 工具 的 模式 为 gn 
WESC I | a es fl (Re eT 7 
LT sm Bl A LE == 


为 30 像素 ,绘制 圆 角 矩形 ， 如 
图 国 因 所 示 。 


10 绘制 业 加 单 击 工具 栏 中 的 。 | 一 
“ 李 圆 工具 ”按钮 ， 在 选项 栏 


> 有 由 本 | 权 汪 了 6 于 22 
中 选择 工具 的 模式 为 “形状 ”， i 
woo TE by ea Re = 


Es Ee 椭圆 i 
135，B: 133) ， 绘 制 椭圆 ， 如 E 
多 因 四 所 不 。 


1 绘制 椭圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 
绘制 椭圆 ， 如 图 团 园 所 示 。 


:| 不 各 明度 :|100%| ~- | 
/中 Bm 7] 


12 减 去 顶层 形 状 单 击 工具 栏 
中 的 “ 帆 辐 二 具 ”7 按钮， 在 远 
项 栏 中 选择 “ 减 去 顶层 形状 ” 


EEC 
锁定 : 图 2 中 A 生 充 : [1008| -| 
选项 ， 绘 制 椭圆 ， 如 图 图 = 


所 示 。 
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人 3 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样 式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 浙 变 登 加” 选项， 设置 参 
数 ， 添 加 渐变 硬 加 效果 ， 如 图 
困 所 不 。 


1 4 绘制 李 圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
ia de hs 0 lt 
设 旱 填 死 为 染色 |(R: 167,1 6: 

a ee et 
心 的 椭圆 ， 如 图 图 困 所 示 。 


5 复制 李 圆 单 击 “ 椭 圆 2” 
图 层 ， 将 其 复制 一 层 ， 碳 键 单 
击 图 层 后 选择 “清除 图 层 样 式 ” 
选项 ， 按 “Ctrl+T> 组 合 键 自由 
变换 形状 ， 按 <Enter> 键 结束 
操作 。 之 后 设置 前 景色 为 黄色 

人 
按 “Alt+Delete> 组 合 键 填充 颜 
色 ， 如 图 困 园 折 示 。 


16 绘制 椭圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
Fae Em a A eR 
设 首 填 多 为 标 色 〈R: 102，6: 

92，B: 79) ， 绘 制 椭圆 ， 如 图 
园 所 示 。 


1 7 绘制 椭圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
a dhs ty 
设置 填充 为 黄色 (R: 191，6: 

154，B: 1106) ,绘制 椭圆 ， 如 
图 图 国 所 示 。 


志和 全 
渐变 


源 合 模式 (0) : 正常 v 回信 和 色 
不 透明 度 (P) :EN 100  % 


:| 加 反 向 介 


样式 人 L) : 线性 ”| 风 与 图 层 对 齐 (I) 


AN 
角度 (N): (| 有 -一度 


缩放 (5) : yg 100 和 虽 
FE 
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18 纺 江 国生 外 形 四 而 工具 栏 i 四 名 三 让 路 径 EE 
中 的 “椭圆 工具 ”按钮 ， 在 选 站 本 


山 和 和 和 的 檀 动 出 几 脸 
A dE A Wo ECR: 
ow ee on sad ote i sal 
10 像素 ， 绘 制 圆 角 和 矩形 ， 如 图 
图 所 未。 


19 绘制 椭圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
2 LL hs re A ER» 
设 前 填 充 为 紫色 (R: 189，6: 

169, iB: 150) ,给 制 椭 圆 ， 如 
图 国 图 所 示 。 


Z0 减 去 顶层 形状 单 击 工具 栏 
中 的 “椭圆 工具 ”按钮 ， 在 先 
项 栏 中 选择 “ 减 去 顶层 形状 ” 
选项 ， 绘 制 椭圆 。 之 后 利用 这 
种 矢量 工具 的 加 减法 ， 绘 制 完 
这 个 图 标 ， 如 图 国 四 所 示 。 


人 1 绘制 圆 角 和 矩形 下 面 绘制 一 
个 新 的 图 标 , 单 击 工具 栏 中 的 < 圆 


角 滤 形 工 具 ” 按 钮 ， 在 选项 栏 
Pa MD hs DAT 
半径 为 30 像素, 绘制 圆 角 和 矩形， 
如 图 贺 园 所 示 。 


浙 变 重 加 
a 源 变 
- 66 全 | 
: bl jy 混合 模式 (0) : 正常 | 回 仿 色 
上 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 | 中] 反 册 ( 
U A ul 样式 (L) : 线性 ”网 与 图 层 对 齐 (I) 
择 ee ja pl, 设置 参 MN _ 
st): (| | 如 一度 
数 ， 添加 渐变 登 加 效果 ， 如 图 缩放 (S) : ee 100  % 
四 所 示 。 人 
R: 168 和 价 R: 167 
B: 181 B: 154 


由 


人 3 绘制 贺 角 矩形 单 击 工具 栏 
pe A Le ea, 
在 选项 栏 中 选择 工具 的 模式 为 
A 0 
制 圆 和 角 窍 形 ， 如 网 困 四 所 示 。 


2 4 沃 加 渐变 要 加 单 击 “ 图 层 * 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
Pe ee i a 
数 ， 添 加 渐变 三 加 效果 ， 如 图 
图 万 示 。 


少 D 复制 贺 角 矩形 单 击 “ 贺 角 
定形 4” 图 层 ， 将 其 复制 一 层 。 
之 后 设置 前 景色 为 黄色 (R: 

DOW) GEN I Si de By he 
《<AlttDelete》 组 合 键 填充 颜 
(EE Co 0 A 可 疝 
由 变换 形状 大 小 ， 如 图 四 
所 示 。 


2 减 去 顶层 形状 单 击 工具 栏 
[之后 他 | 所 和 
项 栏 中 选择 “ 减 去 顶层 形状 ” 
选项 ， 绘 制 矩形 ， 利 用 相同 方 
法 制作 其 他 效果 ， 如 图 团 
所 未 


少 J 绘制 矩形 单 击 工 具 栏 中 
A ete a 
We a Eg doa TR py 
状 ， 上 填充 为 师 色 〈R: 221,，6: 

于 加 昌国 
图 国 国 所 示 。 
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渐变 截 加 
一 渐变 


涵 合 模式 (0) : 正常 v 回信 和 色 
不 透明 度 (P) :ee OO  % 


“= nl Ds 


样式 (L): 线性 ”| 久 | 与 图 屋 对齐 (1) 


角度 (N): (人 50 一 度 
的 


> 
缩放 (S) :ET Se 100  % 
一 力 
R: 191 图 R: 147 


G: 154 
B: 106 


Pp 型 3| 回力 工 贡 男 
[下 党 *| 看 肖 明度 : |100%| -| 
证: 四 A 中 日 坟 训 : [100%| -| 
| 砚 贺 负 ;RH 4 持 由 


| 大 贺 角 息 形 4 


四 效果 
害 渐变 晋 加 


| 大 贺 角 息 形 3 


有 
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之 8 绘制 贺 角 拢 形 单 击 工具 栏 
中 的 “ 圆 角 矩形 工具 ”按钮 ， 

在 选项 栏 中 选择 工具 的 模式 为 
ff 形状 加 周 对 为 屠 包 |I(R; 

op Ce a se yy 
50 像素 ， 绘 制 圆 角 矩形。 之 后 
将 图 层 复制 一 层 ， 问 右 平移 该 
形状 ， 如 图 国 国 所 示 。 

2Z9 绘制 形状 单 击 工具 栏 中 的 
“钢笔 工具 ”按钮 ， 在 选项 栏 中 
迹 树 四 只 榴 模 过 为 形状 史 焉 充 
ATE R22 Ge N22 
220) ， 绘 制 形状 。 之 后 设置 图 
层 的 混合 模式 为 正片 谷底， 填充 
为 42%， 如 图 国 国 所 示 。 


30 绘制 形状 单 击 工具 栏 中 的 


“钢笔 工具 ”按钮 ， 在 选项 栏 | 国 
、 ee a py 正常 :| 不 透明 度 : [100%| > 
中 选择 工具 的 模式 为 “形状 ”， EE a EE 
填充 为 淡 红 色 (R: 221，6G: i ES 
221, B220) 0 全 前 形状 网 赂 亲属 5 
而 完成 本 图 标的 绘制 工作 ， 如 e 上 扣 园 和 矩形 5 拷贝 
59 


锻 定 : 同 中国 境况 = |42% | -| 


图 国 园 折 示 。 9 友 回 @ 白 司 亩 
马 绘制 贺 角 和 矩形 下 面 再 设计 
一 款 新 图 标 。. 单 击 工 具 栏 中 的 “ 圆 
角 和 定形 工具 ”按钮 ， 在 选项 栏 
Fh a de I ts A 
J CR 02 G92 
Be es 0 
制 圆 角 窍 形 。 之 后 单 击 工具 栏 
Fh Ta te a 
项 柱 中 选择 “合并 形状 ”， 绘 
制 椭 融 ， 如 图 国 国 所 示 。 

了 2 绘制 雨滴 单 击 工具 栏 中 
Sa aa 
a ss Ay 
A sess Ce Res Ge 
Gs | Bm Be A 2 
利用 同样 方法 绘制 更 多 雨滴 ， 
从 而 完成 本 幅 图 标 设 计 ， 如 图 
国 所 示 。 


铁定: 四 ww 市 自 车 况 3|100%| - | 


他 3 绘制 加 角 短 形 下 面 百 设计 
一 款 新 图 标 . 单 击 工具 栏 中 的 “加 


起 于 人 
We 4 I te A Te 
半径 为 10 像 素 , 绘制 贺 角 矩形， 
如 图 国 国 所 示 。 
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[ 正 党 | 不 透明 度 : 
猎 定 : 网 sf 中 卓 。 填充: 


I | | | > 
@@ | 同 | 加 名 7 到 图 ~ 
效果 而 
心 渐变 登 加 
省 | 下 纺 天 气 
[us 
器 所 回 台 让 回音 鞍 


渐变 从 加 


号 人 添加 渐变 要 加 单 市 “图 层 ” = 


\ 、 Sa IH 汤 合 模式 (0) : 正常 v 回信 和 色 
面板 下 方 的 “添加 图 层 样 式 ” 哇哇 0 < Me 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 WE [| Fas 多 
样式 (L) :” 具 性 v 园 与 图 层 对 齐 (IT) 多 4 
择 “ 浙 变 秋 加 ”选项 ,设置 参 。 ，， 个， 。 \ 
数 ， 添 加 渐变 徐 加 效果 ， 如 图 ee 
lu 回 加 
图 所 示 。 Sa 4 
B: 154  B: 79 68| 


也 D 绘制 伞 把 单 击 工 具 栏 中 的 
“钢笔 工具 ”按钮 ， 在 选项 栏 
te em 
议 前 填充 为 标 色 (R: 102，6; 

DOB Da we 
国 四 所 未 。 


了 6 给 制 伞 面 单 击 工具 栏 中 的 
J 3 a pe 
i Im A NR 
VE A R292: 
20450 :Gm | ei 
后 利用 相似 方法 绘制 伴 面 ， 从 
而 完成 本 款 图 标的 设计 工作 ， 
如 图 园 因 所 示 。 


也 7 更 多 效果 浏览 已 绘制 完 
成 的 图 标 ， 记 住 并 总 结 所 用 
方法 ， 之 后 利用 相似 方法 绘制 
更 多 图 标 ， 如 图 四 四 所 示 。 


SS 


[下 党 :| 不 透明 度 : 
皇 定 : 加 2 出 六 二 并 : 
FE 到 
局 形状 8 是 
LJ _ 国 

回 角 矩形 7 fr 
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7.6 
UI 设计 师 必 读 : 图 标尺 寸 大 小 


APP 的 图 标 《ICON) 不 仪 指 的 是 应 用 程序 的 局 动 图标 ， 还 包括 菜单 栏 、 状 态 柱 以 及 切换 导航 
栏 等 位 置 出 现 的 其 他 标示 性 图 标 ， 所 以 ICON 是 指 这 些 图 标的 集合 。 

WOON UD m2 Fr oe 2 2 ee AD ED tt oD a DP 
( 特 高 ) 四 种 ， 如 表 7-1 所 示 为 Android 系 统 屏幕 密度 标准 尺寸 。 


表 7-1 Android 系 统 屏 幕 密度 标准 尺寸 


|CON 类 型 屏幕 密度 标准 尺寸 


注 : Launcher: 程序 主 界面 ， 启 动 图 标 ， Menu: 菜单 栏 : Status Bar: 状态 栏 ,List View: 列表 显示 ; Tab: 切 
换 、 标 签 ; Dialog: 对 话 框 。 


iPhone 的 屏幕 密度 默认 为 mDPI， 所 以 没有 Android 分 得 那么 详细 ， 按 照 手 机 、 设 备 厂 本 的 类 
2 oa ee 


表 7-2 iPhone 系统 屏幕 密度 标准 尺寸 
ICON 类 型 屏幕 标准 尺寸 


Windows Phone 的 图 标 标 准 非常 表 7-3 Windows Phone 系 统 屏 幕 密度 标准 尺寸 
简洁 和 统一 ， 对 于 设计 师 来 说 是 最 容 沙 东 闪 
入 


应 用 工具 栏 48px X 48px 
主 末 蛙 图 标 173px X 173px 


Ww 


本 章 主 要 收录 了 5 个 三 维 图 标 (ICON ) 的 实战 案例 ， 包 括 简 
约 风 和 复古 风 , 主要 利用 图 层 样式 的 到 加 来 表现 立体 三 维 效果 ， 
通过 本 章 的 学 习 可 以 使 读者 更 熟练 地 灵活 运用 各 种 图 层 样式 。 


国 几 网 图 


三 维 图 标 表现 
图 层 样 式 应 用 
各 种 材质 表现 
图 标 设计 过 程 
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@ 光盘 路 径 
Chapter08/Media 


= me el = 吕 久 4 到 ‘fv pa 二 
辆 /+ =| 大 IZ 国医 上 县 三 JI 和、 全 | /去 (14( 寺 工 N 


Level 一 一 音乐 图 标 是 手机 上 必 不 可 少 的 工具 图 案 。 音 乐 是 用 有 组 织 的 乐音 来 表 
A 达 人 们 思想 情感 、 反 映 现 实生 活 的 一 种 艺术 ， 它 使 人 感觉 到 放松 舒适 ， 
CS4 CS5 CS6 CC 此 首 乐 图 标的 制作 也 应 该 以 舒适 、 放 松 为 重点 进行 创作 。 


本 例 中 我 们 要 制作 的 音乐 图 标 外 观 简单 、 布 局 清晰 ， 给 人 以 简单 快捷 、 清 新 舒适 的 感 
觉 ， 营 造 出 一 种 轻松 愉快 的 氛围 。 设 计 师 首先 选择 了 洲 净 整 党 的 日 色 ， 利 用 光影 效 琳 制 作出 


何洁 舒适 的 图 标底 座 ; 其 次 选择 让 人 感觉 温 芝 舒适 的 橙色 绘制 首 乐 图 标 ;， 最 后 配 以 简单 实用 
的 投 钮 稼 造 轻松 居 快 的 氛围 ， 紧 扣 音 乐 儿 标 主题 。 


Eee ， 
01 和 六 件 执行 文件 > 和 - 
2 AA 、 人 本 | 户头 到 天 站 OTH 
a A 
选择 “背景 素材 . jpg 素 例 ， a 
将 其 打开 ， 如 图 加 加 上 所 示 。 ET 


| 


(0 〇 2 绘制 图 形 新建 图 层 ， 单 击 
A 
按钮 ， 在 选项 栏 中 设置 工具 的 
模式 为 1“ 路径” ,绘制 路 径 ， 

$2 OO phan Or A | | 
径 转 换 为 选区 ， 设 前 景色 为 白 
色 ， 按 《<Alt+Delete》 组 合 键 填 
充 颜色 ， 按 《Ctrl+D> 组 合 键 取 
消 选 区 ， 如 图 加 加 因 所 示 。 


[Lp 并 让 国外 TT 口 明 由 

EE 

锁定 : 加 sf 中 BB 填充: |100%| -| 
I 

S| J 图 EE1 


° ee 


UD 


i 国 -|| 路 经 :| 建立: | 选区 .. 蒙 版 形状 中 咖 届 1* 侈 | 浆 半径 : |100 像 : 对 fi 四 


veal 


〇 3 新 建 图 层 单 击 工具 箱 中 的 
“钢笔 开具 ”按钮 ， 在 选项 栏 
人 
绘制 路 径 ， 将 路 径 转换 为 选区 ， 
设 前 景色 为 浅 灰 色 (R: 249, G: 
248，B: 248) ， 填 充 颜色 ， 取 
消 选 区 ， 如 图 加 贺 所 示 。 


〇 4 复制 选区 单 击 工具 箱 中 的 
a EEE A en 
中 选择 工具 的 模式 为 “路 径 ”， 
绘制 路 径 ， 将 路 径 转换 为 选 
Be Ne a a 
Oe A 
部 分 ， 取 消 选 区 ， 如 图 四 四 
所 示 。 


0 〇 5 添加 斜面 和 浮雕 单 击 “图 
层 ” 面 板 下 方 的 “添加 图 层 样 
式 ” 按 钮 ， 在 弹出 的 下 拉 菜 单 
中 选择 | 斜面 和 浮雕 ”选项 
设置 参数 ， 添 加 斜面 和 浮雕 ， 
如 图 四 国 所 示 。 


0 添加 投影 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 
“投影 ”选项 ， 设 置 参 数 ， 添 
加 投影 ， 如 图 因 辆 所 示 。 


OO 7 新 建 图 层 单 击 工具 箱 中 的 
se 
中 选择 工具 的 模式 为 “路 径 ”， 
绘制 路 径 , 将 路 径 转 换 为 选区 ， 
设 前 景色 为 黄色 (R: 230，6: 
0 OW ei 1 0 a 
消 选区 ， 如 图 四 国 所 示 。 


印度 (N) : - 30 度 
( 。 |) 回合 用 全 局 光 (6) 
A030 ls 


光泽 等 高 线 : pb 


固 党 险 锯 类 (L) 
高 光 模 式 (H) : 滤 色 

不 透明 度 (0) : 
阴影 模式 (A) : ” 滤 色 


不 透明 度 (C) ZN 100 % 
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图 层 

IP 型 ;| 回 wg TBm 四 
FE :] 明朗: [100%] -| 
和: 四 /中 Bt [100%[ -| 
@@ 上 | 图 层 : 


° Ml ee' 


图 导 省 | 路径 
iP 类 型 | 国名 荆 品 明 国 
| 正常 | 不 透明 度 : 


锁定 : 加 中 国 填充 : [100%| > | 
Ee 
© 让 固 屋 2 


© | 图 大 1 
- 四 图 挟 0 


c 灰 回 四. 外 司 亩 中 


投影 

源 合 模式 (5) :正片 鸽 底 - GE 100 

不 透明 度 (0) : Zo 5 
角度 (A): | | 】 30 ” 度 回合 用 全 局 光 (G) 
下 离 (D) :cs 10 像素 
扩展 (R) : CS 0 % 
大 小 3 13 像素 


gd 


川 


蝇 EE 

Pp :| 国外 TT 口 曙 四 
攻 *] 并 :oo ] 
锁定 : 加 sf 中 和 填 况 :|100%| -| 


多 | “图 层 3 


@ 上] 图 层 2 fr 
多 效果 
多 斜面 和 浮 央 
| @ 投影 = 
DO .加 .向 辐 莉 


(8 添加 斜面 和 浮雕 单 击 “ 图 
层 ” 面 板 下 方 的 “添加 图 层 样 
式 ” 按 钮 ， 在 弹出 的 下 拉 羔 

中 选择 “斜面 和 浮雕 ”选项 ， 

设置 参数 ,添加 斜面 和 浮雕 ， 

如 图 因 国 所 示 。 


0 〇 9 添加 内 阴影 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 内 阴影 ”选项 ， 设 置 参 数 ， 
添加 内 阴影 ， 如 图 因 困 所 示 。 


1 0 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜单 中 选 
择 “ 渐 变革 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 芝 加 ， 如 图 团 
所 示 。 


1 新 建 图 层 单 击 工具 箱 中 的 
Tm a ee eH, a 
a ll a ar A ee 4 

绘制 路 径 , 将 路 径 转换 为 选区 ， 

设 前 景色 为 淡 黄 色 (R 255, G: 
2480 Be 2 De a me ya 
消 选 区 ， 得 到 “图 层 4” 图 层 ， 

如 图 园 困 所 示 。 


1 之 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 渐 变 准 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 和 加 ， 如 图 团 
所 示 。 
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样式 (T): 内 侠 画 vv 
方法 (Q@) : 平滑 v 
深度 (D): ep 113 % 
方向 : 图 上 AQF 
大 小 (2): go 6 


软化 (F) : C0 


僚 素 
丛 素 
际 影 

鳞 度 (N):  ” 1720 度 


O 〇 \ 
| 。 ) 回合 用 全 局 光 (6) 
高 度 =Si[la0 | 这 


| 用 -| Dssso 


Ri 

高 光 模 式 (H) : 正片 霍 底 D4 lal G: 102 

不 进 明度 (0) : [== 0 了 

R: 255 

隔 影 模式 (a) : ”正片 叙 底 - i Caoa 
B 


不 透明 度 (C) :erZS 35  % 


兴 隔 影 

竹 构 

混合 模式 ({B) : 正片 登 底 Ee 

不 透明 度 (0): ye9 更 % 和 
角度 人 ) :( 116 度 回 ] 使 用 全 局 光 (G) 
甘 离 (0) : go 5 ”像素 
限 富 (C) : [= 0  % 
大 小 (5): pe 3 像素 

渐变 堆 加 

涵 合 模式 (0) : 正常 Md 仿 色 

不 透明 度 (P): cy 100 % 
[| | | 后 (x 
样式 (L): 线性 YY 图 | 与 图 层 对 齐 {I) 
角度 (N): (人 56 一度 
绽放 (S) -一 100 胡 


渐变 霍 加 
渐变 
源 合 楼 式 (0) : 
不 透明 度 (FP) : 
xs | 


样式 (1L): 


缩放 {S) : 
合 R: 185 可 会 
G: 157 RR: 255 R: 224 
B: 139 5 G: 196 
B: 255 B: 161 
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1 3 复制 图 层 单 击 “ 图 层 4” 
图 屋 , | 按 《Ctr1+J》 组 合 键 复制 
图 层 ， 按 《Ctr1+T》 组 合 刍 ， 

右键 单 击 画面 ， 选 择 “ 垂 直 翻 加 
转 ” 选 项 ， 将 图 层 问 下 平移 ， © ] 
按 KEnter》 键 结束 操作 ， 如 图 
团 所 示 。 


锁定 : 图 ww 中 四 填充: |100%| - | 


14 新 建 图 层 单 击 工具 箱 中 的 
“钢笔 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “路 径 ”， 

绘制 路 径 , 将 路 径 转 换 为 选区 ， 

设 前 景色 为 浅 灰色 (R 222, G: 
思 ois 2 OF Dh dna mg nb 
消 选 区 ， 如 图 图 园 所 示 。 


1 5 新 建 图 层 单 击 工具 箱 中 的 
由 0 a 
二 

绘制 路 径 , 将 路 径 转 换 为 选区 ， 

讽 前 景色 为 浅 灰 色 (CR 222 6 
Pb Rs Of a wo TR 
消 先 区， 如 图 国 团 所 示 。 


16 新 建 图 层 单 击 工具 箱 中 的 
“钢笔 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “路 径 ”， 


[二 | 不 过 明度 : 
中 眉 


绘制 路 径 ,将 路 径 转换 为 选区 ， oe - 
PT 2 OW VN | ol i ee | 面目 :| 国 屋 
mn | |] ke 4 Bl 5 


消 选 区 ， 如 图 图 国 所 示 。 


加 友 回力 丘 而 


/新建 图 层 单 击 “图 层 4” 
图 习 ,中 入 Gi 中》 如 作 
图 | 属 咱 纺 Om 

右键 单 击 画面 ， 选 择 “ 水 平 翻 
转 ”， 将 图 层 向 左 平移 ， 按 
《Enter> 键 结束 操作 ， 如 图 图 
节 所 不 。 


EN ee 
中 咎 3 
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孙 音 硕 图 标 制作 


Keyword 矩形 工具 、 圆 角 和 矩形 工具 、 


Key 
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录音 图 标 是 手机 上 经 常 遇 到 的 工具 图 案 ， 录 音 图 标 应 该 简洁 明了 、 注 
重 细节 、 操 作 简单 ， 给 用 户 高 质量 的 感觉 。 


= ISTe]l 
CS4 CS5 CS6 CC 


本 例 中 的 录音 图 标 以 复古 为 主题 ， 大 红 的 惧 慢 加 上 复 吉 的 话筒 ， 让 人 如 置身 于 20 世 纪 30 
年 代 大 上 海 歌 舞厅 ， 轻 松 营 造 出 热情 的 氛围 。 设 计 师 以 大 红 惧 慢 做 背景 ， 再 加 上 很 有 感觉 的 
和 灯光， 最 后 加 上 国 龙 点睛 的 复古 话 简 ， 一 副 创 意 无 限 的 作品 融 完 成 了 。 


O 1 新 建文 件 执行 “文件 > 新 
建 ” 命 令 ， 在 弹出 的 “新 建 ” 
对 话 框 中 ， 杀 建 一 个 过 度 和 高 
度 分 别 为 680X600 像素 的 空白 
J ore oe hy tr 
钮 结束 操作 ， 如 图 贺 加 所 示 。 


01 | 


〇 2 绘制 背景 单 击 工具 栏 中 的 国 权 
“渐变 工具 ”按钮 ， 在 选项 栏 | 区 | Cex 
中 单 击 “ 渐 变 编辑 器 ”按钮 ， i 
BE ea 名 称 外 :至 证 一 一 一 一 
设置 渐变 榴 几 吝 背 蝎 因 的 矶 渐 骨 厂  22 > 


平滑 度 负 ): |100| |% 


变色 ， 如 图 国 因 所 示 。 = 
ea 
国 R: 55 : 
色 标 B80 


-150- 


〇 3 绘制 贺 角 矩形 单 击 工具 栏 
中 的 “ 贺 角 矩形 工具 ”按钮 ， 
在 选项 栏 中 选择 工具 的 模式 为 
Wan ey 2 ss: 
制 圆 角 和 矩形， 如 图 因 国 所 示 。 


0 〇 4 导入 素材 执行 “文件 > 打 
开 ” 命 令 ， 在 弹出 的 对 话 框 中 ， 
选择 素材 并 打开 ， 将 其 拖 搜 至 
场景 文件 中 ， 自 由 变换 大 小 ， 
移动 到 合适 的 位 置 ， 右 键 单 击 
图 层 ， 选 择 “ 创 建 前 贴 蒙 版 ” 
选项 ， 如 图 贺 国 所 示 。 


〇 5 绘制 高 光 新 建 图 层 ， 单 击 
工具 栏 中 的 “画笔 本 具 ” 按 钮 ， 
在 选项 栏 中 选择 “和 柔 角 画 笔 ”， 
设置 前 景色 为 和 白色， 绘制 高 光 ， 
议 置 钢 层 的 宴 合 模式 为 “颜色 
减 淡 ”， 不 透明 度 为 50%， 填 
充 为 60%， 右 键 单 击 图 层 ， 选 
择 “ 创 建 驶 贴 蒙 版 ”选项 ， 如 
所 示 。 

6 绘制 矩形 单 击 工具 栏 中 的 
We he ot ts 
a dy Ee bo 
设 管 填充 为 灰色 (R: 195，6: 

9350 
键 单 击 图 层 ， 选 择 “ 创 建 剪贴 
绽 版 ”选项 ， 如 图 所 示 。 


OO 7 添加 斜面 和 浮雕 单 击 “ 图 
层 ” 面 板 下 方 的 “添加 图 层 样 
式 ” 按 钮 ， 在 弹出 的 下 拉 菜单 
中 选择 “和 斜面 和 浮雕 ”选项 ， 
设置 参数 ， 添 加 斜面 和 浮雕 效 
果 ， 如 图 困 四 所 示 。 


iP 有 3| 国名 TT 口 明 四 


| 正常 3| 不 迁 明 度 : |100%| ~ 


图 屋 


a | IP 到 3| 国 @@ 荆 口 明 日 
[ . | 正午 > | 不 透明 度 : |100%| 一 | 
| 锁定 : 图 中国 二 充 : |100%| v | 


WW 


四 


A 


O8 添加 描 边 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 
“ 描 边 ”选项 ， 设 置 参数 ， 添 
加 黑色 描 边 ， 如 图 固 国 所 示 。 


O9 添加 内 发 光 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 内 发 光 ” 选 项 ， 设 置 参 数 ， 
添加 内 发 光 效 果 ， 如 图 国 
所 示 。 


1 0 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 渐 变 琶 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 车 加 效果 ， 如 图 
加 所 示 。 


生生 添加 投影 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样 式 ” 按 
钮 ， 在 弹出 的 下 拉 荣 单 中 选择 
“投影 ” 选项， 设置 参数 ， 添 
加 投影 效果 ， 如 图 团 图 所 示 。 


12 导入 素材 执行 “文件 > 打 
开 ” 命 令 ， 在 弹出 的 对 话 框 中 ， 
选择 素材 并 打开 ， 将 其 拖 搜 至 
场景 文件 中 ， 自 由 变换 大 小 ， 
移动 到 合适 位 置 ， 如 图 加 
所 示 。 


Photoshop APP Ul 设计 从 入 门 到 精通 


擅 边 
结构 
大 小 (S) : 《SP 僚 素 


位 置 (P): 外 部 = 


混合 模式 (BE) : 正常 

不 透明 度 (0) : 41 % 

坪 充 类型 (F): 宏 色 vv 

= 国 

法 

混合 模式 (6) : ”有 生 加 

不 适 明度 (0) yg 15 5 
杂 色 (N) = CS 0 < 
5 | | 

图 素 


方法 (Q@): 秘 和 和 v 


源 : 同 居中 (E) ”图 边缘 (G6) 

阻塞 (C) : [= 0 % 
大 小 (5) : 上 1 像素 

渐变 稚 加 

泥 合 模式 (0) : 正常 

不 透明 度 {P) : zs 

AZ- ET 口 <sow 

样式 (L) : ”线性 -= [|: 对 齐 (I) 
角度 (N) : | | 180 | 度 
缩放 (5) : = a 

EE 

图”R: 227 全 
G: 178 
B:0/5 

每 构 

源 合 模式 (5) : 正片 受 底 ~ 国 国 

不 透明 度 (0) : c= 75  % 
和 度 (a): [| 120” 度 园 使 用 全 局 光 (c) 
下 高 (D) : /一 1 像素 
扩展 (R) : [SP 0 % 
大 小 (5): ge 一 5 “像素 


® | 二 二 了 
局 证 形 1 让 
fF 产 
A 六 同 利 泽 眠 过 
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@ 光盘 路 径 
Chapter08/Media 


和 窍 形 工具 、 钢 笔 工 具 、 图 层 样式 


Level 一 一 电话 短 图 标 是 手机 上 必 不 可 少 的 工具 图 案 ， 它 是 人 们 用 来 记录 亲人 、 
A 朋友 电话 的 工具 ， 其 作为 手机 的 基本 功能 之 一 ， 每 天 都 被 我 们 频繁 地 使 用 
CS4 CS5 CS6 CC 着 。 电 话 敌 图标 设计 应 该 同 个 性 化 、 人 性 化 的 方 同 发 展 。 


本 例 我 们 将 制作 一 个 电话 夭 图 标 ， 该 图 标 设 计 过 程 中 采用 牛皮 纸 或 皮革 的 色彩 ， 周 边 使 
用 金属 潮 伺 色 的 环 扣 作为 六 饰 | 由 加 的 者 人 色 图 标 二 型 员 冰 明 J 党 吉 出 复 吉 | 沉稳 MI 大 信 、 
有 年 代 感 的 氛围 。 


全 kw | 


O 1 新 建文 件 执行 “文件 > 新 
ee er a 
对 话 框 中 ， 淅 建 下 个 宽度 和 和 高 
度 分 别 为 1280X960 像素 的 空 
白文 档 ， 如 图 贺 贺 所 示 。 


OZ 填充 颜色 设置 前 景色 为 灰 
fu dR: 2am 22m 2 
按 《AlttDelete》 组 合 键 ， 填 充 
前 景色 ， 如 图 国 四 所 示 。 
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Photoshop APP Ul 设计 从 入 门 到 精通 


( 〇 3 绘制 国 角 和 矩形 单 击 工具 栏 通 放 | 中公 | 号 


el / 99 、 和 下 TT 台 羡 
中 的 “ 贺 角 和 矩 形 工 具 ” 按 馈 ， 二 二 
| 正常 所 edt ||| = 
在 选项 栏 中 选择 工具 的 模式 为 a ee 
2 状 ”， 访 加 Je 额定 : 同 玉 中 古装 交 [loo-] 
“形状 ”， 设 置 填充 为 棕色 〈R: ee 于 
局 上 加 :| 贺 角 拒 形 1 
yi, | ma BAG Di ee A 下 


© 


80 像素 ， 绘 制 圆 角 矩形， 得 到 
“ 圆 角 和 窍 形 1” 图 层 ， 如 图 四 
四 万 示 。 


(OO 4 复制 贺 角 和 矩形 将 “ 圆 角 适 
形 1” 图 层 进行 复制 , 得 到 “ 圆 
角 短 形 1 副 赤 图 层 川 将 形 
源 同 是 汪 和 攀 省 |i 放 年 
Dy Br eR: OB Ge uw 
lOO lonDe et 
填充 前 景色 ， 如 图 贺 贺 所 示 。 


| 正常 二 不 透明 度 : 
插 定 : 国 让 a 填充 : 


[r= 
过 贺 间 矩形 1 副本 
上 


GE 所 回 和 四 恒 闸 中 


OD 变化 选区 按 <Ctrl> 键 ， 同 
时 单 击 “ 圆 角 拖 形 1 副本 ”图 
层 缩 上 略图， 调 出 圆 角 矩形 选区 ， 
INN o> | 克 芝 
TER ee ont se til 
如 图 加 四 所 示 。 


日 
| 正常 :| 不 透明 度 : [100%| > | 
祝 定 : 四 4 中 四 其 充 : [1009] 


@@ | 全 | 加 条 扰 形 1 副本 


0 〇 6 绘制 亮光 单 击 工具 栏 中 的 
“渐变 工具 ”按钮 ， 在 选项 栏 中 
单 击 “ 径 向 渐变 ”按钮 ,再 单 击 “ 渐 
变 编辑 器 ”按钮 ， 弹 出 “渐变 编 “” 


渐变 类 型 CT): 实 底 了 


| 对 话 框 ， 议 置 参数 ， 在 选 平滑 度 名 ): |100 > |% 


区 . 内 绘制 渐 变 ， 设置 图 层 ye : Re 253 R258 2 
模式 为 明度 ， 不 透明 度 为 80%，。 吕 E 
帅 除 种 ) 
如 二 11 国 所 太 。 用 | 除 加) 


OO 7 绘制 形状 单 击 工具 栏 中 的 
po A re 
be Os 
Ww EI A CR: 7 GG: 

53，B: 46) ， 绘 制 形状 ， 如 图 
园 所 未 。 


镇定 : 国 mw 中 看 革 郑 避 :1oo| - | 


ls 
二 


| 
Ea . 


@@ || 十 | 志江 ! 到 本 ll 


上 国 : 回扣 拭 乱 1 .| 


EL 


J 


0 〇 8 绘制 形状 单 击 工具 栏 中 的 
Wy 2 ee an 
项 栏 中 选择 “合并 形状 ”选项 ， 
设置 半径 为 30 像素 ， 绘 制 圆 角 
矩形 ， 单 击 工 具 栏 中 的 “和 矩形 
工具 ”按钮 ， 在 选项 栏 中 选择 
“合并 形状 ”选项 , 绘制 矩形 ， 
如 图 国 四 所 示 。 
0 〇 9 绘制 矩形 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
二 
Wn EO a eu RE oi: 
53，B: 46) ， 绘 制 椭圆 ， 如 图 
图 所 未。 


1 0 绘制 贺 角 珑 形 单 击 工 具 栏 
申 的 “加 第 赴 形 了 并 具 ” 护 匀 川 在 
选项 栏 中 选择 工具 的 模式 为 “ 形 
人 
制 圆 角 矩形 ， 如 图 国 园 所 示 。 


1 1 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 荣 单 中 选 
| se i 
数 ， 琴 加 渐变 三 加 ， 如 图 团 
所 示 。 


2 添加 内 阴影 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 内 阴影 ”选项 ， 设 置 参 数 ， 
添加 内 阴影 ， 如 图 图 团 所 示 ，。 


| 正常 | 下 透明 度 : 
锁定 : so 中 站 填充 : 
正常 站 趟 迁 明 度 : 100%| | 
/a 
© EE 回 钊 矩形 2 | 
二 和 视 回 1 时 
也 FE 形状 1 
9 所. 回 名 斩 20 
渐变 二 加 
渐变 
混合 模式 (0) : 正常 > 回访 色 
不 透明 度 (P) : EN 100 5% 
[Mv| RA 
样式 (L) : 线性 > | 财 与 图 屋 对 齐 (1) 
角度 (N): (0 一 度 
绽放 {Ss) bd ZS S 100 % 
加 加 
全 会 
R: 240 Rs 255 R: 167 
Ee 0 
为 际 影 
迁 构 
汤 合 模式 (6) : 正片 司 底 v 2 
不 透明 度 (0) : ey 16 %” 
锡 度 (4) : (120” 度 园 使 用 全 局 光 (G) 
一 -一 倍 喜 
C= [6 | 
49 余 素 
门 半 险峰 尖 
0 目 
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| 正常 本 不 透明 度 : [100% [100%| = | 
锁定 -: 六 中国 坛 充 : om 


E EE 


Photoshop APP Ul 设计 从 入 门 到 精通 


立体 勾 选 框图 标 制作 


@ 光盘 路 径 
Chapter08/Media 


立体 勾 选 框图 标 是 手机 上 经 常 遇 到 的 工具 图 案 ， 干净 利落 的 线条 和 形 
状 是 该 类 图 标 设 计 的 固有 套路 。 在 设计 时 要 遵循 线条 干净 利沙， 颜色 简洁 
CS4 CS5 CS6 CC 单一 等 事项 ， 以 便 让 用 户 看 到 图 标 能 够 感知 、 想 象 、 理 解 图 标的 意思 。 


Version 


本 例 中 制作 的 是 立体 勾 选 框 ， 设 计 师 以 侧面 的 视角 来 设计 图 标 ， 首 先 以 天 到 色 的 边框 打 
造 出 唱和 玛 剔透 的 立体 边框 效果 ， 之 后 座 加 光影 以 及 阴影 使 其 更 加 坎 真 完美 ， 再 搭配 以 绿色 的 
立体 对 勾 图 标 使 画面 看 起 来 主题 明确 、 人 简洁 明了 。 


OO1 打开 文件 执行 “文件 > 打 
开 ” 命 令 ， 在 弹出 的 对 话 框 中 ， 
选择 素材 文件 ， 将 其 打开 ， 如 
图 贺 四 所 示 。 


饥 定 : 国 w 中 日 其: [oo 
| 

© 背景 
[一 - 


2 绘制 形状 单 击 工具 栏 中 的 
po Wa a 
oo Oa 
Ww eR: 0 

23OW Be a) bs i eA, lan 
图 国 因 万 示 . 
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〇 3 绘制 边框 再 次 单 击 工具 栏 
中 的 钢笔 于 具 ” 按钮 在 先 
项 栏 中 选择 “ 减 去 顶层 形状 ” 
选项 , 绘制 形状 , 得 到 “形状 1” 
图 层 ， 如 图 四 国 所 示 。 


(4 添加 斜面 和 浮雕 单 击 “ 图 
层 ” 面 板 下 方 的 “添加 图 层 样 
式 ”按钮 ， 在 弹出 的 下 拉 菜 : 
中 选择 “斜面 和 浮雕 ”选项 ， 
设置 参数 ， 添 加 斜面 和 浮雕 
如 图 贺 困 所 示 。 


O5D 添加 内 阴影 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 先 
择 “ 内 阴影 ”选项 ， 设 置 参 数 ， 
添加 内 阴影 ， 如 图 国 四 所 示 。 


0 〇 6 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 先 
择 “ 渐 变 释 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 琶 加 ， 如 图 四 
因 所 示 。 


OO 7 绘制 形状 新 建 图 层 ， 单 击 
工具 箱 中 的 “钢笔 工具 ”按钮 ， 
在 选项 栏 中 选择 工具 的 模式 为 
“形状 ”， 设 置 填充 为 黑色 ， 
绘制 形状 , 得 到 “形状 2” 图 层 ， 
将 “形状 2” 图 层 移动 到 “形状 
1” 图 层 下 方 , 如 图 困 四 上 所 示 。 


LE 
铁定 : 加 of 中 看 。 培训 : [i008] -| 


[大 | 


| 形状 1 
上 LE 
别 | | 一 加 
中 所 加 日 白 回首 


斜面 和 浮 炭 
结构 
样式 (T): 内 斜面 ~ 
方法 (Q): 平滑 
深度 (0): = 154 % 
方向 : 加 上 下 
大 小 (2): 寺 6 像素 
软化 (F): G 0 像素 
阴影 
角度 (N): 130 度 
| % 回合 用 全 局 光 (G) 
高 度 “ 4 度 
| ”| 回 消除 锯 频 QD) 


高 光 模式 (H): 滤 色 


v 


不 透明 度 (O): D100 % 
阴影 模式 (A): 正片 县 底 ~ 国 国 
不 透明 度 (c): 人 0 % 中 
内 阴影 
结构 
混合 模式 (6): 线性 加 深 1 
不 透明 度 (0): 为 % 
前 度 (A): | | 41 ” 度 回 使 用 全 局 光 (G) 
距离 (D0): 后 3 像素 
阻塞 (0): 0 % 
大 小 (5): 四 5 上 久 素 四 
渐变 亚 加 
渐变 
混合 模式 (D): 正常 回访 色 
不 透明 度 (P): DD FI % 
浙 朗 : [ER | 器] 反 向 () 
样式 (LD): 线性 Y 加 与 图 层 对 齐名 
角度 (V: | “ ) 4 度 
缩放 (5): - ZS 100  % 
加 加 
全 R: 163 和 个 R: 104 | R24 
2 : 20 


ral 
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渐变 县 加 


0 〇 8 添加 渐变 本 加 单 击 “ 图 层 ” 。 国 
ANI 混合 模式 (D): 正常 v 回访 色 

面 极 下 方 的 | 浴 加 图 层 样 式 ” 2 DD 100 % 

按钮 ， 在 弹出 的 下 拉 荣 单 中 选 | 口上 和 

择 史 渐变 笃 加 由 we 项 ， 设 导 a 样式 (0): 线性 园 与 图 层 对 齐 侣 

if 角度 (N): \ | 93 度 


2 添 加 淘 变 闭 加 ， 如 图 固 锁 放 (S): em zs 100 % 
所 示 。 | 


自转 鲁 便 
R: 153R: 69 R: 108 R: 80 R: 108 R: 64 
G214G:213 Gl GG G10 
B: 232B: 139 B: 208 B: 162 B: 208 Bil 
斜面 和 浮雕 


(9 添加 斜面 和 浮雕 单 击 “图 "5 . 
层 ” 面 板 下 方 的 “添加 图 层 样 。 3 闻 于 一 。、 


方向 : @ 上 下 


却 ” 按 钮 ， 在 弹出 的 下 拉 荣 上 = 
中 选择 “斜面 和 学 膨 ” 选 项 ， 

\ EEC 是 员 5 | vi be \o”// 口 使 用 全 局 (6) 
设置 参数 ， 添 加 斜面 和 浮雕 ， BE 


光泽 等 高 线 : | "| 加 消除 锯齿 人 


如 图 国 图 所 示 0 高 光 模 式 (H): 亮光 v 


不 透明 度 (O): 2 100 % 


阴影 模式 (A): 正片 又 底 ~ 国 国 
不 透明 度 (c): < 0 % 


10 绘制 形状 新 建 图 层 ， 单 击 
工具 箱 中 的 “钢笔 工具 ”按钮 ， 
在 选项 栏 中 选择 工具 的 模式 为 
“形状 ”， 设 置 填充 为 黑色 ， 
绘制 形状 ， 得 到 “形状 3” 图 
层 ， 将 “形状 3” 图 层 移动 到 hm 
“形状 2” 图 层 下 方 ， 如 图 因 Fg 
加 所 示 。 
渐变 亚 加 


1 1 添加 渐变 要 加 单 击 “图 层 ” 。 雄 
面板 下 方 的 “添加 图 层 样 式 ” 混合 模式 (0): 正常 口 仿 色 


不 透明 度 (p): “加 % 


按钮 ， 在 弹出 的 下 拉 菜 单 中 选 i: | 门 反 向 R) 


、 lL a ub 样式 (): 线性 思 | 与 图 层 对 齐 锯 
择 “ 浙 变 生 加 ”选项 ,设置 参政。 。 


数 ， 添 加 渐变 徐 加 ， 如 图 缩 沁 (5): < 一 A 100 % 


| 正常 *| 天 委 明度 : |100%| > | 
说 E: 回 中国 填充 :100%| | 
© | 站 责 : fe 
@ [2 fe” 
Fr 国 
© | 同形 大 3 友 ~ 
号 


和 Layer 7 


ul 国 图 
园 所 不 。 “一 = / 
国 A 合 ”全 

R: 103 R: 158 R: 108 R: 163 

G: 135 G: 190 G: 203 G: BAB 

B: 153 B: 211 B: 225 B: 2 


2 绘制 阴影 选择 “背景 ”图 
层 ， 单 击 “ 创 建新 图 层 ” 按 钮 
新 建 图 层 ， 单 击 工具 箱 中 的 
“画笔 IR?" 按钮, 企 选 顺 位 
中 选择 “ 柔 角 画笔 ”， 不 透明 
度 为 10%， 绘 制 阴影 ， 如 图 国 - 珊 一 
国 所 示 。 因 一 


正常 | 不 迁 明 度 : 
妖 定 : 国 w 出 六 填充 : 


妆 形状 3 友 > 
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1 3 绘制 对 匀 新 建 图 层 ， 单 击 
工具 箱 中 的 “钢笔 工具 ”按钮 ， 
在 选项 栏 中 选择 工具 的 模式 为 
“形状 ”， 绘 制 形状 ， 得 到 “ 形 
状 4” 图 层 ， 如 图 图 国 所 示 。 


1 4 添加 斜面 和 浮雕 单 击 “ 图 
层 ” 面板 下 方 的 “添加 图 层 样 
式 ” 按 钮 ， 在 弹出 的 下 拉 菜 单 
中 选择 “斜面 和 浮 对 ”选项 ， 
设置 参数 ， 添 加 斜面 和 浮雕 ， 
如 图 团 困 所 示 。 


5 添加 内 阴影 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 内 阴影 ”选项 ， 设 置 参数 ， 
添加 内 阴影 ， 如 图 园 国 所 示 。 


16 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 渐 变 车 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 大 加 ， 如 图 团 
图 所 示 。 


1/ 绘制 形状 新 建 图 层 ， 单 击 
RED eM a 
在 选项 栏 中 选择 工具 的 模式 为 
“形状 ”， 绘 制 形状 ， 得 到 “ 形 
状 5” 图 层 ， 如 图 图 国 所 示 。 


| 正常 # | 不 迁 明 度 : "| 
锁定 : 加 ww 中 四 填充: [100%| = | 
[i I. 
二 | 戏 闫 4 | 
国 T | 
= [3 nw gh 


斜面 和 浮雕 
结构 
样式 (1D): 内 斜面 
方法 (Q): 平滑 M 
深度 D): 三 5 195 % 
方向 : @@ 上 © 下 
大 小 (Z): 后 3 像素 
软化 (F): G 0 像素 
阴影 
角度 (N): 56 度 
| 5 | 回 使 用 全 局 光 (G) 
i 69 度 
光泽 等 高 线 : | ”| 辣 消 除 锯 具 (L 


高 光 模式 (H): 滤 色 
不 透明 度 (0): G 


下 


0 % 


阴影 模式 (A): 正片 到 底 | 
不 透明 度 (O): 二 28 % 
内 阴影 
结构 
混合 模式 (6): 正片 县 底 ~ 国 国 : 
不 透明 度 (0): 一 
角度 (A): | ， | -90 度 回 使 用 全 局 光 (G) 
距离 (D): ZS 47 像素 
阻塞 (0): 4 0 % 
大 小 (5): 58 像素 
渐变 亚 加 
渐变 
混合 模式 (D): 正常 v 回访 色 
不 透明 度 (人 p): 本 100 % 
浙 广 : [| | 丫 反 向 () 
样式 (LD): 线性 ”| 贱 与 图 层 对 齐 人 0 
角度 MW): | 50 ” 讼 
缩放 (5): - Z5 100  % 
国 ; 
ER 
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1 8 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜单 中 先 
择 “ 渐 变 释 加” 选项， 设置 参 
数 ， 添 加 渐变 到 加 ， 如 图 图 
国 所 示 。 


1 9 添加 斜面 和 浮雕 单 击 “ 图 
层 ” 面 板 下 方 的 “添加 图 层 样 
式 ” 按 钮 ， 在 弹出 的 下 拉 菜 E 

中 选择 “和 斜面 和 浮雕 ”选项 ， 

设置 参数 ， 添 加 斜面 和 浮雕 ， 

如 图 国 国 所 示 。 


0 绘制 形状 新 建 图 层 ， 单 击 
工具 箱 中 的 “钢笔 工具 ”按钮 ， 
在 选项 栏 中 选择 工具 的 模式 为 
“形状 ”， 绘 制 形状 ， 得 到 “ 形 
状 6” 图 层 ， 如 图 图 加 所 示 。 


之 添加 渐变 要 加 单 击 “图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 先 
择 “ 渐 变 登 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 琶 加 ， 如 图 园 
图 所 示 。 


之 添加 斜面 和 浮雕 单 击 “ 图 
层 ” 面 板 下 方 的 “添加 图 层 样 
式 ” 按 钮 ， 在 弹出 的 下 拉 菜 
中 选择 “斜面 和 浮雕 ”选项 ， 
设置 参数 ， 添 加 斜面 和 浮雕 
如 图 图 加 所 示 。 


设计 从 入 门 到 精通 


渐变 亚 加 
渐变 
混合 模式 (0O): 正常 v | | 仿 色 
不 透明 度 (P): 2 100  % 
新 朗 : | 站 | 反问 () 
样式 (): 线性 加 与 图 层 对 齐名 
角度 (WY: | ， ) 50 度 
缩放 (5): - Z5 100  % 
加 图 
sa 
斜面 和 学 同 


结构 
样式 (D: 内 斜面 ~ 
方法 (9): 平滑 ed 


深度 D): 于 62 % 
方向 : 加 上 让 
大 小 (2): 三 2 ”像素 
软化 中 ): 5 0 ”像素 
阴影 
角度 (N): 130 度 
| % ) 回 使 用 全 局 光 (G) 
高 度 : 一 48 局 
光泽 等 高 绪 :| -| 器 消 疹 强占 0 
高 光 模式 (H): 要 加 ~ 
不 透明 度 (O): DW 100 % 
阴影 模式 (A): 正片 又 底 ~ 国 国 
不 透明 度 (c): < 0 % 
渐变 亚 加 
渐变 
赣 合 模式 (O): 正常 v 中 | 仿 色 
不 透明 度 (p): zy 100  % 
渐 交 : 国 本 本 本 本 本 天 天 |v| 口 反 向 QR) 
样式 (0D): 线性 Y ”Iv 与 图 层 对 齐 (D 
角度 :| | 90 度 
缩放 (S): 7 100  % 
| 
便 
R: 102 
G: 199 
B: 69 
斜面 和 浮 睦 


样式 :内 介面 ~ 
方法 Q): 平时 。 ~ 


深度 0): ZS 266 % 
方向 : 加 上 下 
大 小 (2): 上 2 像素 
软化 (F): G 0 像素 
阴影 
角度 (N): -130 度 
| so | 回 使 用 全 局 光 (G) 
高 度 : “ 4 度 
光泽 等 高 线 : | 三 消除 锯齿 (0) 
高 光 模 式 (H): 严 加 M 
不 透明 度 (D): 二 100 % 
阴影 模式 (A) 正片 一 底 ~ 国 国 
不 透明 度 (C): G 0 % 
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人 3 绘制 形状 新 建 图 层 ， 单 击 
工具 箱 中 的 “钢笔 工具 ”按钮 ， 
在 选项 栏 中 选择 工具 的 模式 为 
“形状 ”， 绘 制 形状 ， 得 到 “ 形 
状 7” 图 层 ， 如 图 困 困 所 示 。 


Z4 添加 渐变 到 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样 式 ” 
投 钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 渐 变 琶 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 车 加 ， 如 图 轩 
图 所 未 。 


之] 添加 斜面 和 浮雕 单 击 “ 图 
层 ”面板 下 方 的 “添加 图 层 样 
式 ”按钮 ， 在 弹出 的 下 拉 菜 : 
中 选择 “斜面 和 浮雕 ”选项 ， 
设置 参数 ， 添 加 斜面 和 浮雕 ， 
如 图 国 团 所 示 。 


6 添加 内 阴影 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 内 阴影 ”选项 ， 设 置 参 数 ， 
添加 内 阴影 ， 如 图 团 国 所 示 。 


人 之/ 盖 印 图 层 关闭 背景 图 层 前 
的 眼睛 图 标 ， 选 中 最 上 方 图 层 ， 
按 《Shift+Ctrl+Alt+E> 组 合 键 
盖 印 所 有 图 层 ， 按 《Ctrl+T> 组 
合 键 ， 上 自由 变化 图 标 大 小 ， 移 
A) BU ey oe | 
层 前 的 眼睛 图 标 ， 如 图 国 
所 示 。 


渐变 亚 加 

渐变 

混合 模式 (D): 正常 回访 色 
不 透明 度 (p): 100  % 


新 六 [En | © 反 疝 () 


样式 (LD): 线性 Y ”与 图 层 对 齐 人 0 
角度 全 :| 咱 -s2 “” 典 
缩 帮 (5S): 2 100  % 
男 
| 
国 国 
R: 86 R: 119 : 
G: 204 G: 51 
B58 B29 
冬 面 和 浮 赚 


结构 
样式 (1); 内 斜面 
方法 (Q@): 平滑 ” 
深度 D): 3 


100 % 


方向 : @ 上 下 
大 小 (2): 后 3 像素 
软化 (F): 6 0 像素 
阴影 
角度 (N): -113 | 度 
| 8 |) 回 使 用 全 局 光 (G) 
高 度 : 一 4 后 
光泽 等 高 线 : | = 消除 锯齿 (0) 
高 光 模式 (H): 颜色 减 淡 M 
不 透明 度 (D): m 100 % 
阴影 模式 (A): 正片 一 底 ~ 国 国 
不 透明 度 (C): 5 0 % 四 
内 阴影 
结构 


混合 模式 (8) 正片 县 底 | 

不 透明 度 (0): ”33 % 
角度 (A): | | 120 ” 度 门 使 有 全 局 光 (G) 
下 高 D): 2 一 ”19 像素 


阻塞 (0): < 0 % 
大 小 (5): = | 18 像素 


-161- 


| 正常 * | 不 透明 度 : 


策 定 : 图 .中西 填充: 


@ | em EE 
| 下 二 二 - 1 
| 和 形状 4 i 

| 1 

噩 管状 5 eo 
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立体 图 标 整套 设计 制作 


@ 光盘 路 径 
Chapter08/Media 


” 圆 角 矩形 工具 、 和 矩形 工具 、 椭 圆 工具 、 钢 笔 工 具 、 图 层 样 式 
到 二 二 一 个 界面 的 首页 美观 与 否 往往 是 初次 来 访 的 用 户 决定 是 否 进行 深入 浏 
览 的 标准 , 一 套 制作 精良 的 图 标 设计 ， 可 以 传达 丰富 的 产品 信息 , 一 般 要 求 
se 条 单 桓 日 ， 在 少量 的 方寸 之 了 地， 除了 表达 出 一 定 的 形象 与 信息 外 ， 还 得 兼 
顾 美观 与 协调 。 


设计 师 通过 手机 上 按钮 、 音 啊 等 细节 来 表现 手机 的 黑色 塑料 质感 ， 然 后 通过 高 光 和 过 小 
色 来 表现 玻璃 ， 最 后 通过 一 系列 的 图 标 环绕 不 仅 傈 单 醒目 ， 而 且 在 传达 丰富 的 产品 信息 的 同 
时 ， 还 阅 顾 了 类 观 与 协调 。 


〇 1 打开 文件 执行 “文件 > 打 
开 ” 命 令 ， 在 弹出 的 对 话 框 中 ， 
选择 “背景 素材 . jpg” 素 材 ， 


王 加 中国 区 
将 其 打开 ， 如 图 贺 加 所 示 。 
& 三 ER 入 
02 


(OZ 绘制 贺 角 矩形 单 击 工 具 箱 


中 的 “ 圆 角 矩形 工具 ”按钮 ， 上 


在 选项 栏 中 设置 工具 的 模式 为 
“形状 ”， 设 置 填充 为 深 灰 色 
(Re, a 8 sD 
径 为 50 像素 ， 绘 制 圆 角 和 矩形 ， 
如 图 国 四 所 示 。 
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( 〇 3 绘制 贺 角 矩形 单 击 工具 箱 
和 
0 a ss 
闫 中 省 该 加 吉庆 为 频 色 |(R: 
BLIG EI a Bs | 
如 图 国 因 所 示 。 


〇 4 绘制 按钮 单 击 工具 箱 中 的 
1 00) se i Wh 
Ba 
妈 置 填 多 为 钦 色 (R: 150, 6G: 

WO RO es 
到 “形状 1” 图 层 ， 如 图 加 四 
所 示 。 


05D 复制 按钮 单 击 “ 形 状 1” 
ban ea Om a 
合 键 将 图 层 复 制 多 次 ， 按 
OB 
2 pa asa 
下 XEnter》 键 结束 ， 如 图 国 
四 所 示 。 


0 〇 6 绘制 贺 角 矩形 单 击 工具 箱 
中 的 “ 圆 角 矩形 工具 ”按钮 ， 
在 选项 栏 中 设置 工具 的 模式 为 
“形状 设置 填充 为 白色 ， 
半径 10 像素 ， 绘 制 圆 角 矩 形 ， 
设置 图 层 的 不 透明 度 为 8%， 如 
图 国 因 所 示 。 


OO 7 绘制 椭圆 单 击 工具 箱 中 的 
“椭圆 卫 具 ”按钮 ， 在 选项 栏 
Hh tm A A 
中 曾 | 坟 多 轩辕 | 所 <Shifit> 
刍 绘 制 正 贺 ， 设 置 图 层 的 不 透 
明度 为 %， 如 图 恩 因 所 示 。 


填充 : |100%| > 


| 正常 | 和 透明 度 : |s% | ~ 

和 鱼 定 : 图 .中国 填 论 : |100%| ~ 
丘 一 寺 本 

营 上 | 椭 回 1 

国语 图 负 拭 还 2 

© 国语 形状 工 拷 贝 3 
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O8 绘制 形状 单 击 工具 箱 中 的 

(UE ee | es a 
中 设置 工具 的 模式 为 “形状 ”， 
设置 填充 为 白色 ， 绘 制 形状 ， 
设置 图 层 的 填充 为 0， 如 图 因 
四 所 示 . 


「 下 党 
让 or -| 
王 EE 已 荡 状 2 站 
过 国语 柱 贺 1 
党 ii 回 课 矩形 2 
si | 1 这 2 3 
四 中 所 加 日 白 可 主导 


> [44 29 人 
O9 添加 渐变 要 加 单 击 “ 图 层 5 
面板 下 方 的 “添加 图 层 样式 ” ae 
接 钮 几 在 弹 轴 的 下 拉 菜 单 让 湖 川 天 EEEE 虽 omw 
综 式 伺 ) : ”线性 v || 与 图 层 对 齐 (I) 
择 “ 渐 变 合 加 ”选项 , 设置 参数 ， ms 
添加 渐变 破 加 ， 设 置 图 层 的 不 sx: = -= 
透明 度 为 5%, 如 图 园 国 所 示 | 
Wo 负 O 4153 
上 度 为 5%， 如 图 国 国 所 示 加 
10 绘制 椭圆 单 击 工具 箱 中 的 
66 下] 99 J 、 » | 站 涯 型 < 国 Lh T 总 | 贺 
椭圆 工具 ”按钮 ， 在 选项 栏 人 一 一 
正品 *| 下 选 明 度 : |s% | ~ 
~ 和 且 的 梢 站 尖 66 TR» - 
中 设置 工具 的 模式 为 “形状 ”， J a Me 
设置 填充 为 白色 ， 按 《Shift》 ee 
Ea 和 开 
明度 为 5%， 如 图 国 团 所 示 。 四 | 同人 :1n 
| [ee bg i] 丑 通 
20 
1 绘制 椭圆 单 击 工具 箱 中 的 
由 由 Wl l DE #3| 回 丰 工 下 胃 昌 
圆 角 矩形 工具 ”按钮 ， 在 先 Le 
mW 个 i a pp) di i py | 正常 *| 不 迁 明 度 : |100%| ~ 
i 、 、 2 
状 ”， 半 径 10 像素 ， 绘 制 圆 角 re 一 
| ps \ Ls 
矩形 ， 设 置 图 层 的 填充 为 0， 四 = 
如 图 团 园 所 示 。 四 效果 
哇 ” 尚 变 秋 加 lL 
3 加 是 站 还 
、 66 9 
人 2 添加 描 边 单 击 图 “层面 ” es 
pd N yl, 则 | 大 小 (S) : A 日 位 吉 
板 下 方 的 “添加 图 层 样式 ” 按 rE 
Ee | := “加 罗 
a pa | = 
加 上 昌 色 描 边 ， 设 置 图 层 的 不 透 | : 


明度 为 10%， 如 图 困 园 所 示 。 


esl 


第 8 章 三维 1CON 制作 


1 3 导入 素材 执行 “文件 > 打 
EC 

选择 素材 文件 ， 并 单 击 “打开 ， 
按钮 打开 素材 。 将 素材 拖 搜 至 ©®) 
oe a rh a Ort > 

组 合 键 目 由 变换 大 小 、 位 置 ， 

jl nt erm fe 2 

困 所 示 。 @ | 右 3 友 


时 效果 


加 撞 边 


26 


4 更 多 效果 利用 同样 方法 ， 
导入 更 多 素材 ， 分 别 放 在 合适 
的 位 置 ， 如 图 园 困 所 示 。 


Pp 型 3] 加 OOTSSBD 目 
正常 s 不 透明 度 : [100%| ~ 
雏 定 : 加 of 中 看 菇 充 : [100%| 
@ | J as:s 
是 [| 到 且 到 
时 3 图 后 13 


个 、 | EE 1 
Ss ko 6 9 


15 添加 文字 单 击 工具 栏 中 的 
i 
项 栏 中 设置 字体 为 Arimo， 字 
号 为 “15”， 颜 色 为 灰色 (R: 
199，G: 199，B: 199) ， 输 入 
文字 ， 如 图 贺 团 所 示 。 


正常 | 不 透明 度 : [100%| > 


1 更 多 文字 利用 同样 方法 ， 
制作 更 多 文字 效果 ， 如 图 园 
国 所 示 。 


~ 度 : [100%| ~ 
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8.6 

UI 设计 师 必 读 : 图 标 设 计 过 程 

平时 看 到 那些 大 师 们 制作 的 jcon， 我 们 总 是 惊讶 不 已 。 作 为 初学 者 的 我 们 ， 妆 被 要 求 或 者 
想 要 做 一 个 icon 的 时 候 ， 却 不 知道 如 何 下 手 ， 从 而 导致 时 间 在 各 种 无 意义 的 杂乱 思考 和 “寻找 
素材 ”中 被 白白 消耗 挥 了 。 

在 这 里 ， 我 结合 大 师 的 指导 以 及 自己 的 经 历 ， 总 结 一 套 流 程 和 大 家 一 起 来 分 享 : 初学 者 怎 
下 局 


8. 6.1 最 初 构思 


在 进行 icon 制 作 之 前 ， 我 们 要 先 想 一 些 必要 问题 以 及 答案 : 为 什么 要 设计 这 个 icon? 这 个 
设计 的 需求 是 什么 ? 什么 题材 才能 满足 这 些 需 求 ? 这 个 题材 能 做 到 很 好 的 表达 吗 ? 这 些 问题 有 
的 可 能 稍 有 时 还 没有 答案 几 不 要 看 和 急 史 我们 可 以 只 看 癌 题 去 看 至 优 秀 的 作品 咖 和 在 剂 久 的 威 深 审 
得 到 局 发 ， 有 时 候 灵 感 束 是 这 样 产 生 的 。 激 发 灵感 还 有 一 个 方法 束 是 随手 画 草 图 。 

我 们 在 想 过 之 后 ， 于 脑海 中 确定 要 画 什么 ， 还 要 考虑 一 些 客观 条 件 ， 像 做 一 套图 标 时 间 
是 不 是 允许 、 茶 个 题材 细节 是 不 是 太 复 杂 导 致 无 法 完成 等 。 我 们 可 以 选择 几 个 题材 作为 备 选 方 
案 。 如 果 不 是 商业 需求 ， 我 们 可 以 从 感 兴趣 的 题材 入 手 ， 这 样 就 能 激发 目 己 的 创作 欲望 。 


8.6.2 图 标 造 型 设计 


物体 的 展现 形式 是 什么 ”时 个 物体 还 是 物体 组 合 ? 色彩 如 何 搭 配 才 能 突出 主题 ? 趣味 性 如 
何 展 现 ? 以 上 这 些 问题 我 们 在 表现 风格 的 时 候 都 要 一 一 考虑 到 ， 同 时 还 需要 考虑 的 是 : 根据 现 
在 icon 设 计 的 流行 趋势 来 选择 写实 风格 ,根据 所 要 表达 的 主题 选择 材质 等 。 

通过 上 述 问 题 我 们 可 以 友 现 ， 确 定 题材 和 确定 风格 的 过 程 是 互相 影 响 、 相 互 交 织 看 进行 
的 。 我 们 只 要 把 握 住 这 两 点 ， 然 后 大 量 地 观看 优秀 的 icon 设 计 作 品 并 打 和 草稿 ， 从 别人 的 设计 中 
吸收 其 作品 所 传达 的 信息 ， 让 我 们 知 着 什么 是 好 的 作品 ， 好 的 作品 是 怎么 组 成 的 。 

或 许 有 的 人 可 能 在 茶 些 情况 下 根本 不 需要 问 问 题 ， 直 接 上 手 珊 开 始 做 icon。 即 便 是 这 样 ， 
我 想 他 也 是 经 过 了 前 期 的 思考 和 权衡 。 因 为 这 是 完成 一 个 优质 icon 设 计 必 经 的 过 程 。 


不 同 设 计 师 给 菜 网 站 设计 的 logo 形 象 
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8.6.3 图 标 图 像 制 作 


经 过 了 确定 题材 和 表现 风格 之 后 ， 我 们 就 开始 进入 实战 操作 了 。 现 在 需要 考虑 的 问题 是 怎 
么 表现 题材 和 风格 ， 选 择 什么 技巧 工具 和 方法 。 

很 多 初学 者 在 具体 实现 这 个 步骤 的 时 候 ， 不 知道 怎么 实现 某 种 材质 ， 也 不 知道 怎么 制作 某 
Ph py | Tn ,| ER Ze A 2 

1. 临摹 

创造 是 从 临 莫 开 始 的 。 我 们 在 临 莫 的 时 候 ， 要 选择 最 好 的 作品 来 进行 。 虽 然 这 可 能 有 些 难 
度 ， 但 是 临摹 好 作品 要 比 临摹 水 平一 般 作品 的 效果 要 好 很 多 。 

需要 强调 的 是 ， 我 们 在 临摹 之 前 要 仔细 地 观察 分 析 ， 观 察 光 源 的 位 置 、 颜 色 分 布 以 及 icon 
的 层次 等 ， 这 样 要 比 直 接 上 手 的 效率 高 得 多 。 

2. 找到 PSD 学 习 

分 析 大 师 的 PSD 文 件 ， 看 他 们 是 怎么 用 图 层 样 式 来 实现 诸如 金属 质感 、 高 光 等 特效 ， 以 及 耐 
心地 堆 著 细节 的 技巧 。 


图 下” sz 国画 * | #5 国 绊 A 开 > | 0 ci- 匠 呈 区 滞 
文件 (F) ”编辑 (E) 图 像 (1) 图 层 (L) 选择 (5) 滤 镜 (T) 视图 (V) 窗口 (W) 帮助 (H) 

hr Bi:[ 本 三 旺 过 作 | 而 如 卫 忆 包 下 | 车 计 立 弛 利得 | 由 | 

safe-icon-psd.psd @ 66.7% (Layer 12, RGB/8) * 国 


熏 | 硬 | 而 | 页 | 而 | 看 | 
en ~ m oo [si | 一 上 


日 国 " PCGlgrsslessAsrAssSameo7 目 


司 | 司 | 司 肆 | 吕 | 时 
gooaoooa 


to ene 
El 


.CO.DUHa 


[加 appicontemplates.psd @ 66.7% {Background, RGB/8) * [ElIalE 图 层 RB = 三 
| 正常 =| 不 透明 度 ; |100% | 
锁定 ; 加 2 中 全 填充 ; |100% | 


画 | 了 回 paperapp 
画 | 加 8 smape2cpy3 六 < 


| 多 效果 
钨 内 阴影 
| 多 渐变 释 加 


口 8 国 四 :haoe2zcpy: 疡 < 
侈 效果 

多 投影 

多 渐变 得 加 
器 8 rezon4 产 -< 
多 效果 

多 投影 

多 汤 朗 亚 加 
转 8 加 可 Shape2copy 所 < 
多 效果 

多 投影 


和 


司 


@ 


| 多 渐变 得 加 
夯 | Ef shape 6 copy 时 <^ 
多 | | 智能 滤 镜 


56567950 同 | ”” 广 档 :2.47MJ5.76M 3 B53 大 四 人 已 本 


制作 icon 过 程 中 需要 注意 的 细 和 有 以 下 3 点 。 

(1) 越 是 精细 的 图 标 残 越 是 要 注意 路 径 对 像素 的 影 啊 。 

(2) 因为 icon 尺 寸 较 小 ， 所 以 瓯 要 求 色彩 饱满 、 突 出 对 比 度 ， 并 且 有 丰富 的 色 阶 层次 。 
(3) 缩放 疼 标 时 ， 要 注意 对 其 进行 相应 调整 。 


中 el 


本 章 主 要 收录 了 4 个 图形 设计 制作 案例 ,涉及 滤 镜 、 色 阶 、 闭 值 、 
图 层 样 式 、 混 合 模式 等 相关 设计 技术 。 通 过 本 章 的 学 习 ， 读 者 
可 以 学 握 更 高 级 的 图 形 编 辑 技巧 ， 从 而 使 自己 设计 的 APP 作品 
更 加 生动 、 通 真 。 


渡 镜 应 用 
图 层 样式 应 用 
混合 模式 应 用 
图 形 编辑 技巧 
矿 才 指责 


人 国人 国人 国信 


人 、 
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时 过 TICKETS $18 » DOORS 23pM 
aa 一 你 一 
于 < 


| 
F452654879213954701 
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@ 光盘 路 径 
Chapter09/Media 


二 维 瓜 扫 摘 图 形 


AAA ”矩形 工具 、 滤 镜 工 具 


二 维 码 是 现代 生活 中 经 常见 到 和 使 用 的 ， 它 是 用 某 种 特定 的 几何 图 形 

按 一 定 规律 在 平面 上 (二 维 方向 ) 分 布 的 黑白 相间 的 图 形 ， 主 要 用 来 记录 

二 ies。 数据 符号 信息 。 由 于 二 维 码 能 够 在 横向 和 纵向 两 个 方向 同时 表达 信息 ， 因 
此 可 以 在 很 小 的 面积 内 表达 大 量 的 信息 。 


Level 


本 例 制作 的 是 三 维 码 图 标 。 肯 先 通过 杂 色 、 马 完 殉 和 立 值 使 画面 中 形成 不 规则 的 黑 日 相 
间 图 形 ， 再 利用 矩形 工具 在 画面 上 绘制 二 维 人 码 特 色 的 三 个 角 ， 最 后 在 其 中 配 上 图 上 厂 ， 一 个 非 
意 形 象 的 三 维 码 就 制作 完成 了 。 


O1 新 建文 件 执行 “文件 > 
新 建 ” 命 令 ， 或 按 下 快捷 键 
<Ctrl+fN>， 在 弹出 的 “新 建 ? 
对 话 框 中 新 建 宽度 和 高 度 分 别 
为 200X 200 像素 的 空白 文档 
完成 后 单 击 “ 确 定 ” 按 钮 结束 
操作 ， 如 图 贺 加 所 示 。 


参考 线 


02 设置 网 格 执行 “编辑 >》 首 mo 


0 
颜色 局 : 国 洋 红 


ET Rh 

话 框 中 设置 相应 参数 , 单 击 “ 确 一 0 
网 2 || | le 

QO Cae D> A Gi da 

如 图 国 贺 所 示 。 


Photoshop APP Ul 设计 从 入 门 到 精通 


OO3 添加 杂 色 新 建 图 层 ， 得 到 
“图 层 1” 图 层 ， 填 充 黑色 。 
之 后 执行 “ 滤 镜 > 杂 色 > 添加 
杂 色 ”命令 ， 在 弹出 的 “添加 
杂 色 ”对 话 框 中 设置 参数 ， 单 


数量 以 ) : 5 


分 布 
大 I Dal 让 证 昌平. 分 布 
3 确 KE 按 钊 2 束 操 人 如 高 斯 分 布 (6) 


多国 国 睫 示 。 


中 单 色 加 ) 


〇 4 制作 马赛 克 执行 “ 滤 镜 > 
像素 化 > 马赛克” 命令 ， 在 弹 
出 的 “马赛 克 ” 对 话 框 中 设置 
参数 ， 单 击 “ 确 定 ” 按 钮 结束 
操作 ， 如 图 贺 国 所 示 。 


100% 


单元 格 太 小 (0): 习 ”方形 


0 〇 5 调整 国 值 执行 “图 像 > 调 
整 > 阐 值 ” 命令 , 在 弹出 的 “ 阐 
值 ”对 话 框 中 设置 参数 ， 单 击 
“确定 ”按钮 结束 操作 ， 如 图 
国 四 所 示 . 


羡 值 色 阶 (7): 


OO 人 绘制 矩形 单 击 工具 栏 中 的 

“和夫 形 国内 ” 掖 乌 ,| 在 先 项 栏 
中 选择 工具 的 模式 为 “形状 ”， 
设置 填充 为 黑色 ， 绘 制 矩 形 ， 
如 图 国 因 所 示 。 


(OO / 减 去 顶层 形状 单 击 工具 栏 
中 的 “上 矩形 工具 ”按钮 ， 在 先 
项 栏 中 选择 “ 减 去 顶层 形状 ” 
选项 ， 绘 制 矩 形 ， 如 图 国 
所 示 。 


O8 合并 形状 单 击 工具 栏 中 的 

“矩形 工具 ”按钮 ， 在 选项 栏 
中 选择 “合并 形状 ”选项 ， 绽 
制 矩形 ， 利 用 相似 方法 制作 其 
他 形状 ， 如 图 困 四 所 示 。 


0 〇 9 绘制 选区 单 击 工具 栏 中 
的 “和 矩形 选 框 工具 ”按钮 ， 在 
选项 栏 中 单 击 “ 添 加 到 选区 ” 
按钮 ， 绘 制 矩形 选 枉 ， 如 图 国 
因 所 示 。 


1 0 删除 选区 部 分 单 击 “图 层 
| a De le ey se 
Gen) a ore D> 
组 合 键 取 消 选 区 ， 接 着 按 下 
<Ctrl+”> 组 合 键 取消 网 格 ， 如 
图 因 团 所 示 。 


1 1 绘制 贺 角 答 形 单 击 工具 栏 
中 的 “ 圆 角 矩形 工具 ”按钮 ， 在 
远 项 栏 由 选择 下 上 的 模式 为 “ 形 
状 ”， 设 置 半 径 为 5 像素， 绘制 
圆 角 矩形 ， 如 图 贺 园 所 示 。 


12 导入 素材 执行 “文件 > 
打开 ”命令 ， 或 按 下 快捷 键 
RO LO oe hy hi 
对 话 框 中 选择 素材 文件 ， 单 击 
“打开 ”按钮 结束 操作 。 将 素 
材 文 件 拖 搜 至 场景 文件 中 ， 缩 
放大 小 到 合适 位 置 。 右 键 单 击 
儿 层 后 选择 “创建 前 贴 蒙 板 ” 
命令 ， 如 图 图 园 所 示 。 
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下 透明 度 : | 100%| ~ 


Photoshop APP Ul 设计 从 入 门 到 精通 


@ 光盘 路 径 
Chapter09/Media 


Level 一 一 一 一 微 标 图 形 是 生活 中 第 见 的 图 形 ， 它 的 设计 一 般 要 求 主题 突出 、 视 意 深 
简约 大 气 。 本 案例 设计 的 徽标 ， 突 出 了 形体 简洁 、 形 象 明 明 、 引 人 注 
以 及 易于 识别 、 理 解 和 记忆 等 特点 。 


=TKS [ell 


本 例 制 作 的 是 征 标 赂 形 。 设 计 师 以 土 芮 色 为 基准 色 ， 加 上 平 请 的 曲线 设计 出 简 
育 景 ， 之 后 用 沉稳 的 深重 色 给 人 以 值得 信赖 的 感觉 ， 文 字 的 次 加 鲜明 地 突出 了 主题 
挂 绳 设计 更 是 锅 上 添 化 。 


sw 
， 最 后 的 


QO1 新 建文 件 执行 “文件 > 
新 建 ” 人 命令， 或 按 下 快捷 键 
CO OO a 9 
对 话 框 中 新 建 宽 度 和 高 度 分 别 
的 加 
峭 ， 元 咸 后 里 击 “确定 ”按钮 
结束 操作 ， 如 图 贺 加 所 示 。 


〇 2 绘制 背景 设置 前 景色 为 灰 
[各 和 
hn De eo ee | A 
景 填充 颜色 ， 如 图 国 四 所 示 。 
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O03 导入 素材 执行 “文件 > 
ya a a a di 
Or 00, er ey 
对 话 框 中 选择 素材 文件 ， 完 成 
后 单 击 “ 打 开 ” 按 钮 打开 并 将 
其 拖 搜 至 场景 文件 中 ， 如 图 固 
器 上 所 示 。 


O4 绘制 投影 新 建 图 层 ， 按 下 
“Ctrl1> 键 并 单 击 素材 图 层 ， 调 
出 选区 。 设 置 前 景色 为 黑色 ， 
站 
匈 闫 包 册 过 几 《OLD2 组 合 链 
取消 选区 ， 设 置 图 层 的 不 透明 
度 为 30%， 将 图 像 癌 右 下 方 移 
动 ， 将 图 层 移 动 到 素材 图 层 下 
方 ， 如 图 国 加 所 示 。 


0 〇 5 导入 素材 执行 “文件 > 
打开 ”命令 ， 或 按 下 快捷 键 
Oo Oe er ot 
对 话 框 中 选择 素材 文件 ， 完 成 
后 单 击 “打开 ”按钮 打开 并 将 
其 拖 搜 至 场景 文件 中 ， 设 置 图 
层 的 混合 模式 为 “正片 登 底 ”， 

如 多 加 四 上 所 示 。 


0 〇 6 添加 内 阴影 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样 式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 先 
择 “ 内 阴影 ”选项 ， 设 置 参数 ， 
添加 内 阴影 效果 ， 如 图 国 因 
所 示 。 


OO 7 添加 投影 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ”按钮 ， 
在 弹出 的 下 拉 菜 单 中 选择 “ 投 
影 ” 选 项 ， 设 置 参数 ， 添 加 投 
影 效 果 ， 如 图 困 四 所 示 。 
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< PE 


| 正常 | 不 透明 度 : [100%| ~ [100%| ~ | 
镶 定 园 Af 中 向 填充 : 100%| ~ | 


@ [a) ue: 


se 四 坟 中 we 
@ [HE] Hs: 
© Ew] 图 后 2 

[Ee = = 


[| ] 过 


5 产 . 回 钙 


籁 定 :- 加 中 全 填充 [100%| - | 
了 图 层 3 
党 图 层 1 


基本 图 层 2 


gy | ”| 车 宕 
5 不 回忆 面 恒 


汶 隔 影 


芷 构 
混合 模式 (B) : 正片 登 底 | 
不 透明 度 (0) :em 5 % 


旬 度 (8) : ( 120” 度 回 使 用 全 局 光 (G) 


下 离 (D) : /一 了 像 表 
限 富 {C) : 65 0 % 
大 小 (S) : Cn 了 像 来 
元 下 
sss:| "| 口 axsso 
杂 色 一 一 一 一 一 0 1% 
投影 
迁 构 
混合 模式 (B) : 正常 v 
不 透明 度 (0) : ey 75 % 
角度 人 : (上 ) 50 一度 回 使 用 全 局 光 (G) 
下 高 (D) : /一 你 未 
扩展 人) : 0 
大 小 (5) : Ce | 僚 素 
EE 
sus:| A 日 assso 
亲 色 (N): [0 % 13 14| 
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OO8 绘制 正 贺 新 建 图 层 ， 单 
击 工具 箱 中 的 “椭圆 选 框 工 
具 ” 按 钮 ， 绘 制 椭 圆 选区 。 
设置 前 景色 为 深蓝 色 CR: 


罗 ,Ce OQ 2 Ea 通 站 | 路 人 | = 
iP 类 到 $3| 加 OOTZSBm 国 

《Alt+Delete> 组 合 键 为 选区 填 款 i 
公 颜 色 ， 按 下 “Ctrl14D> 组 合 键 EE 
Li 四 图 层 4 I 

取消 选区 ， 如 图 困 因 所 示 。 = es 1 

时 落果 
时 尘 际 影 


到 
DO .四 ©. 和牛 司 站 [EC 


0 〇 9 导入 素材 新 建 图 层 ， 单 
Rs 
钮 ， 在 选项 栏 中 选择 工具 的 模 
式 为 “路 径 ”， 绘 制 路 径 ， 按 
J AO ne A lt 


入 SE SN 图 层 | 通道 | 路 径 | Ms 
径 转 化 为 选区 ， 为 选区 填充 黄 |P 关 as 加 TISBm 日 
re tg oa gO a a [ 正片 二 底 | 不 透 胃 度 : [100%[ > | 

、 vo Wa 铁定 : 图 of 中 四 壬 充 : [1004| -| 
MO BD I ee Han Re ni 四 
图 层 的 混合 模式 为 “正片 琶 底 ”， Sn I 


ll | . © 国 后 3 r= 
如 图 贺 因 所 示 。 Le 


0. 白 日 鱼 E 


110 添加 内 阴影 单 击 “ 图 层 ” 

面板 下 方 的 “添加 图 层 样式 ” 

按钮 ， 在 弹出 的 下 拉 菜 单 中 选 

择 “ 内 阴影 ”选项 ， 设 置 参 数 ， “。。 

添加 内 阴影 效果 ， 如 图 因 ee E= - 有 


,iD, 不 透明 度 O) : zs 75 = 
所 未 i 鲍 度 (A): | 、 ] 120 ” 度 回 使 用 全 局 光 {G) 
距离 (D) : AS 1 像素 
卫 总 (CO) 0 2 
大 小 (S) 


1 添加 投影 单 击 “图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ”按钮 ， 
在 弹出 的 下 拉 菜 单 中 选择 “ 投 ” 吧 。 


pe 议 冒 愉 数 ， 添加 投 源 含 模式 (6) : 正常 本 
不 透明 度 (0) : Ce 75 % 
影 效果 ， 如 图 团 园 所 示 。 oe 
距离 (D) : /s= 1 像素 
扩展 (R) CS 0 = 
大 小 (Ss) 
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112 复制 图 层 单 击 “ 图 层 5” 
|, ea Ore We > ee) 
将 图 层 复 制 一 层 ， 如 图 图 
所 示 。 


3 添加 文字 单 击 工具 栏 中 的 
和 模版 太 巴 册 具 按 钢 川 罕 选 
项 栏 中 设置 字体 为 Adobe 黑体 
Sd | | ea 
岁 层 箱 信 叉 邓 最 佳 和 品质? 
如 图 园 国 毛 示 。 


1 4 添加 渐变 要 加 单 击 “ 图 层 ” 
面 恢 下 方 的 “添加 图 层 样式 ? 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
拌 “渐变 从 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 三 加 效果 ， 如 图 
困 所 不。 


15 绘制 阴影 新 建 图 层 ， 单 
Wr 
钮 ， 在 选项 栏 中 选择 工具 的 模 
式 为 “路 径 ”， 绘 制 路 径 ， 按 
下 SCtrTTEnter> 组 合 链 将 路 径 
转化 为 选区 , 为 选区 填充 黑色 。 
之后 再 取消 选区 ， 如 图 因 
全 [i 


16 绘制 图 形 新 建 图 层 ， 单 击 
工具 栏 中 的 “钢笔 工具 ”按钮 ， 

在 选项 栏 中 选择 工具 的 模式 为 
“路 径 ”。 之 后 绘制 路 径 ， 按 下 
<Ctr1+Enter> 组 合 键 将 路 径 转 化 
为 选区 ， 为 选区 填充 深蓝 色 〈R: 

29, G0, el 02) a pe tn Ha 
消 先 区， 如 图 团 转 所 示 。 


第 9 章 ”丰富 多 彩 的 图 形 设 计 


vb 

性 

日 | 
3 

| 

ie 

中 
加 山 


| 正片 又 底 :| 不 透明 度 : [100%| > | 
锁定 : 图 s 中 四 二 充 : |100% ”| 
© 图 尽 5 拷贝 ' 


| 正常 :| 不 透明 度 : 100%| ~ | 


加 
R: 255 0 
:py 


| 正常 >| 不 透明 度 : [100% mn 
锁定: 图 Af 中 看 坊 充 : [100%| > | 


的 证 : 固 .中 四 壤 充 : [100%| - | 


所 


l 村 | 
图 层 了 
[| 


® | | ee 
吉 | 工 此 局 
5 产 . 回 人 .和 国 


-| /> 


1/ 绘制 阴影 新 建 图 层 ， 单 击 
工具 栏 中 的 “画笔 工具 ”按钮 ， 
在 选项 栏 中 设置 不 透明 度 ， 设 
置 前 景色 为 黑色 ， 绘 制 挂 绳 的 
阴影 ， 如 图 国 国 所 示 。 


18 绘制 挂 强 新 建 图 层 ， 单 击 
工具 栏 中 的 “画笔 工具 ”按钮 ， 
在 选项 栏 中 根据 页 面 实际 显示 
效果 设置 相应 的 不 透明 度 ， 设 
置 前 景色 为 白色 ， 绘 制 挂 绳 ， 
如 图 国 国 所 示 、。 


19 绘制 亮光 新 建 图 层 ， 单 击 
工具 栏 中 的 “画笔 工具 ”按钮 ， 
在 选项 栏 中 设置 不 透明 度 ， 设 
置 前 景色 为 和 白色， 绘制 徽标 右 
下 方 的 亮光 效果 ， 如 图 国 
所 示 。 


0 〇 绘制 阴影 新 建 图 层 ， 单 击 
工具 栏 中 的 “钢笔 工具 ”按钮 ， 
在 选项 栏 中 选择 工具 的 模式 为 
“路 人 径 ”， 在 图 像 右 下 方 绘制 
Bo A ta Oem nt em 
组 合 键 将 路 径 转化 为 选区 ， 单 击 
De a A 
在 选项 栏 中 单 击 “渐变 编辑 器 ” 
按钮 ， 在 弹出 的 “渐变 编辑 器 ” 
对 话 框 中 设置 由 黑 到 透明 的 渐 
变 ， 在 选区 中 绘制 渐变 效果 ， 最 
后 取消 选区 ， 如 图 图 四 所 示 。 


Photoshop APP Ul 设计 从 入 门 到 精通 


浙 变 编辑 器 区 瑟 
而 设 . 
be 
取消 
载 ;As ls 
存储 (8)... 
名 称 MM: ” 自 定 新 建 W) 
平滑 度 员 ): [100| |% 
" i [| 
加 国 
色 标 
不 透明 度 (0): 50 多 位 置 (0): 100 多 星 除 部) 
帅 除 句 
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:= 图 后 8 
Ed 


T_ 。 品 后 fr ll” 
3 充 人 向 辐 曾 


图 层 


[ 正常 :| 不 透明 度 : 
钙 定 : 网 ff 中 向 。 六 充 : 
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@ 光盘 路 径 
Chapter09/Media 


= me 二 Vl i /Ta i i = 小 三 有 后 -er 二 三 | 
起 简 工 具 、 和 窍 形 选 框 工 具 、 横 版 文字 工具 


2 条 形 人 码 也 称 条 人 码 (barcode) ， 定 将 宽度 不 等 的 多 个 器 条 ， 按 照 一 定 


WAS] 
CS4 CS5 CS6 CC 


的 编码 规则 排列 ， 用 以 表达 一 组 信息 的 图 形 标 识 符 。 条 形 码 在 商品 流通 、 
图 书 管 理 、 邮 政 管理 、 银 行 系统 等 许多 领域 都 得 到 了 广泛 的 应 用 。 


本 例 制 作 的 是 条 形 码 图 标 。 首 先 通 过 杂 色 、 动 感 模糊 和 色 阶 使 画面 中 随机 形成 宽度 不 等 
的 多 个 黑 条 ， 再 利用 “和 窍 形 选 框 工具 ”在 务 徊 上 选取 所 要 保留 的 部 分 ， 最 后 加 上 编码 ， 一 个 


完整 的 条 形 人 码 就 制作 完成 了 。 


ll 


〇 1 新 建文 件 执行 “文件 > 
狐 建 ”命令 ,或 按 下 快捷 键 
《Ctrl+N>， 在 弹出 的 “新 建 ” 
对 话 框 中 新 建 宽 度 和 高 度 分 别 
DAD OWA O11 a ee Nhl 

完成 后 单 击 “ 确 定 ” 按 钮 结束 
操作 ， 如 图 加 贺 所 示 。 


OZ 新 建 图 层 新 建 图 层 ， 
a i Uv Ed Ay ht a 
“Alt+Delete> 组 合 键 为 其 填充 
白色 ， 得 到 “图 层 1” 图 层 ， 
如 图 国 辆 所 示 。 


Wil 


Ly pp 


879213954 


Wy 


| 正常 + | 不 透明 度 : [100%| = | 

锁定 : 图 ww 中 四 壤 充 : [100%| "| 
| 请 一 

of Tas: 


量 | | 寺 


办. 向 属 
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(OO3 添加 杂 色 执行 “ 波 镜 > 杂 

色 > 谎 加 杂 色 ”命令 ,在 弹出 

的 “添加 杂 色 ”对 话 框 中 设置 数量 Wy): 5 % 
参数 ， 单 击 “ 确 定 ” 按 钮 结束 币 


U di 加 平均 分 布 
操作 ， 如 图 固 轨 所 示 。 高 斯 分 布 (6) 
可 单 色 On) 


的 “动感 模糊 ”对 话 框 中 设置 
参数 ， 上 河 导 ts 按钮 结束 角度 必 ): 90 度 人 


距离 血 ): 999 像素 


操作 ， 如 图 国 园 所 示 。 


0 4 动感 模糊 执行 “ 滤 镜 > 模 


糊 > 动感 模糊 ”命令 ， 在 弹出 


| 
J 


| 
| 


] 
| 


05 添加 色 阶 单 击 “ 图 层面 男 吕 
板 下 方 的 “创建 新 的 填充 或 调 “| ze [EE 
整 匈 层 ”按钮 ， 在 弹出 的 界面 = | 
中 选择 “ 色 阶 ”选项 。 之 后 在 | 


弹出 的 “属性 ”对 话 框 中 设置 
; 参 类 医 于 [zo | [0.70 [212 | 
相应 参数 ， 如 图 国 四 所 示 。 a 
者 出 色 阶 : |o |255 | 


0 〇 6 添加 色 阶 再 次 单 击 “ 图 层 ” 画 o = 


面板 下 方 的 “创建 新 的 填充 或 ” se: [5s i 
调整 图 技 ” 按 钮 ， 在 弹出 的 界 = ss 
[ee 2 a 
a a a 博 慌 是 区 站 
ea Nj 会 类 un zo lc 2 
置 相应 参数 ， 如 图 园 固 所 示 。 一 = 
输出 色 隐 2 Jo |[255 | 


(OO 7 绘制 选区 单 击 工具 箱 中 的 


“矩形 选 框 工具 ”按钮 ， 绘 抽 my 
I | | | | z 
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8 反选 选区 执行 “选择 > 反 向 ” 


命令 ， 或 按 下 《Shift+Ctr1+I> 
组 合 键 反选 选区 ， 如 图 国 四 所 
pa 


〇 9 删除 选区 单 击 “ 图 层 1” 
图 屋 ， 按 下 《Delete>》 键 删 除 ， 

之 后 按 《Ctr1+D》 组 合 键 取 消 选 
区 ， 如 图 国 困 所 示 。 


10 绘制 选区 单 击 工具 箱 中 的 
“矩形 选 框 工 具 ” 按 钮 ， 绘 制 
矩形 选区 ， 如 图 国 团 所 示 。 


生生 删除 选区 单 击 “ 图 层 1” 
图 层 ， 按 下 《Deletey> 键 删 除 ， 

之 后 按 下 XCtrl114D> 组 合 键 取 消 
选区 ， 如 图 团 园 所 示 。 


2 添加 文字 单 击 工具 箱 中 的 
“模版 贸 打 由 具 ”和 核 饮 川 在 迹 
项 栏 中 设置 字体 为 Adobe 黑体 
SI ve 
色 ， 输 入 相应 编码 文字 ， 如 图 
园 所 未 。 


| 


| 


| 
| 


山 | 


F452654879213954701 
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钙 定 : 困 of 中 四 甘 充 : [i008] -| 
党 sl | 色 辽 2 

时 | 但 ?| | 色 辽 1 

e WN as : 

® | | 才 二 咏 | 


9 加 从 .和 启 国 痢 


[三省 。 | 不 址 罗 度 : [100#] "| 
车 十: a 填 总 填充 : 100%| ~ | 
?| | 色 辽 2 
二 | 世 ?| | 记 阶 1 

地 ii 图 层 1 
[一 一 -党 


© | | 才 坪 


3 六 . 回 和 . 面 国 


| 正常 。 ”<| 不 各 明度 : [100%| - ] 
额定 : 图 yf 中 古装 充 :|1ooxl -| 
二 | 加 | | 色 了 2 

S| | | 色 有 1 

9 [mn] 四 有 : 

名 | | 寺 皮 


3 友 . 回 大 向 同 


rn 回 几 工 瑟 明日 
正常 | 不 透明 麻 : [100%| ~ | 
二 填充 : [1oox] | 

© | | 色 扩 2 

必 8| | 色 失 1 

[| 下 和 : 

| | 外 


3 友 回 大 向导 人 着 


| ED 


[| 
二 | 工 
[| 


F452654879213954701 
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@ 光盘 路 径 


Chapter09/Media 


Level 一 一 一 一 一 宣传 海报 设计 必须 遵循 一 定 的 要 求 才 能 达到 相应 的 宣传 目的 : 应 该 紧 
Vo 扣 主 题 ， 其 中 的 说 明文 字 要 简洁 明了 ， 篇 幅 要 短小 精怪 ， 特 别 是 一 些 举办 
CS4 CS5 CS6 CC 古 动 关上 鸭 海 报时 要因 全 大 喘 贿 旺 关 语 动 的 由 局 出 硬 癌 癌 语 要 网 降 ， 


本 例 制作 的 是 一 个 翌日 海景 的 宜 传 海 报 ， 背 景 选用 了 阳光 、 椰 树 、 沙 滩 、 大 海 等 具有 自 
日 海边 特色 的 元 素来 表现 ， 海 报 正中 间 的 半 透 明 圆 形 以 及 光影 效果 突出 了 夯 耐 中 的 文学 ， 是 
Fie a a a 


TICKETS $18 » DOORS 23PM 


SATURDAY 26 JUNE 


DJLAMONOFO » DJ DIAPOLMO » DJ SUNLI 


Your Club 


〇 1 打开 文件 执行 “文件 > 
打开 ”命令 ,或 按 下 快捷 键 
CO es 
对 话 框 中 选择 素材 文件 ， 完 成 
et 
图 加 四 所 示 。 


5 人 必 . 向 国 
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02 绘制 阴影 新 建 图 层 ， 单 
击 工具 栏 中 的 “画笔 工具 ” 按 
钮 ， 在 选项 栏 中 选择 柔 角 画笔 ， 
降低 不 透明 度 ， 设 置 前 景色 为 
黑色 ， 绘 制 相应 阴影 ， 如 图 贺 
四 所 示 。 


( 〇 3 添加 可 选 颜色 单 击 “ 图 层 ” 
面板 下 方 的 “创建 新 的 填充 或 
调整 图 层 ” 按 钮 ， 在 弹出 的 界 
面 中 选择 “可 选 颜 色 ” 选 项 ， 

pA TE Ei 
中 分 别 选 择 “ 白 色 ”“ 中 性 灰 ” 

选项 ， 设 置 相应 参数 ， 最 后 设 
首钢 层 的 不 透明 度 为 70%， 如 
图 国 因 加 所 示 。 


〇 4 调整 亮度 /对 比 度 单 击 “图 
层 ”面板 下 方 的 “创建 新 的 填 
充 或 调整 图 层 ” 按 钮 ， 在 弹出 
的 界面 中 选择 “亮度 /对 比 度 ” 
选项 ， 之 后 在 弹出 的 “属性 ” 
对 话 框 中 设置 相应 参数 ， 如 图 
加 国 所 示 。 
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镶 定 : 图 ff 中 而 。 甘 充 : [1009| =] 


放 色 : | 扬名 一 
寡 色 : +100 | 婉 
-人 
洋红 : -39 = 
一 一 … 
玄 乞 : -100 降 
黑色 : 0 % 
全 
相对 〔 ) 总 对 


床 名 : | 国 性 外 和 
震 色 : [77 | 
区 | 
茧 名 : - 有 
黑色 : 0 负 

。) 入 对 “ 癌 ) 总 对 06] 


属性 
IO 闪 朗 / 寺 灶 度 
| 
亮度 : 
对 比 度 : 
[_] 使 用 旧版 
yx 加 © 如 


| 
| 


| 图 层 1 
EJ 
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5 绘制 阴影 新 建 图 层 ， 单 击 
工具 栏 中 的 “画笔 工具 ”按钮 ， 
在 选项 栏 中 选择 柔 角 画 笔 ， 降 
po 明度 ， 设 置 前 景色 为 时 
色 ， 绘 制 阴影 。 之 后 设置 图 层 
Pi 
国 所 示 . 


(OO6 绘制 椭圆 单 击 工具 栏 中 
a ee a A 
ee 吧 醒 必 辣 宙 败 胰 
状 ”， 设 置 填充 为 黄色 (R: 
2 Ne A ee ol 
让 <SImifo> 嫂 纵 吊 下 | 加 Ww 局 
设置 图 层 的 不 透明 度 为 30%， 
如 图 因 因 万 示 


30% | > 
/a 


i 
Bal 到 层 了 


过 0 | 二 
3 回信 向 国 


OO / 绘制 椭圆 单 击 工具 栏 中 的 
“椭圆 思 具 ”按钮 ， 在 选项 栏 
机 
设置 填充 为 红色 (R: 186，6: 
G40 BS er Sb el 
绘制 正 圆 。 之 后 设置 图 层 的 不 
透明 度 为 65%， 混 合 模式 为 “ 短 
加 ”， 如 图 四 国 所 示 。 


A B me [Eo] 
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0 〇 8 绘制 酉 圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
i ee It ha PR A Ph 
OE A ny yl Ne, 

J yl a oe I Sh lit > 
键 绘制 正 圆 。 之 后 设置 图 层 的 
不 透明 度 为 65%， 如 图 四 
而 各 


OO9 添加 外 发 光 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
Fa i ee SN st 
添加 外 发 光 效 果 ， 如 图 因 RE 
误 癌 异 式 己 }: 亮光 下 


所 示 。 不 透明 度 (0) Er 2 的 
杂 色 (N) : 


才 属 (P) : 
大 小 (35) -Eee 5 尾 素 


10 绘制 渐变 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 矢量 蒙 版 ” 按 
a sy 
工具 ” 控 钮 ， 之 后 在 选项 栏 中 
单 击 ， 渐 从 编辑 器 ”按钮 ， 接 
者 在 弹出 的 “渐变 编辑 器 ”对 
话 框 中 设置 由 黑 到 白 的 渐变 效 
未 ， 最 后 在 家 版 中 拖 搜 渐 变 ， 
如 图 团 团 所 示 。 
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1 1 绘制 椭圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
Wa I a A ER 

Wa TE LTA i ed a yy a 

颜色 为 白色 ， 按 下 《Shift> 键 
绘制 正 圆 ,| 之 后 设置 图 层 的 不 
透明 上 度 为 65%, 如 图 图 较 所 示 。 


1 2 添加 外 发 光 单 击 “图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “外 发 光 ” 选 项 ， 设 置 参 数 ，。 ，， 
添加 外 发 光 效 果 ， 如 图 团 2 


所 示 泥 合 模式 (E) : 亮光 - 
[en 不 迁 明 度 (0) e204 | 


杂 色 (N) : CS 0 和 


R:_83 
G: 199 


图 素 8 243 
方法 (Q): 和 对 和 BD 


扩 尾 (F) = CS 0 入 


大 小 (S) : ey 54 余 素 


1 3 绘制 渐变 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 矢量 蒙 版 ” 按 
钮 ， 再 单 击 工具 栏 中 的 “渐变 
工具 ”按钮 ， 接 着 在 选项 栏 中 
单 击 “ 渐 变 编辑 器 ”按钮 ， 
后 在 弹出 的 “渐变 编辑 器 ”对 
话 框 中 设置 由 黑 到 白 的 渐变 效 
果 ， 最 后 在 蒙 版 中 拖 搜 渐变 ， 
如 图 困 园 所 示 ，。 


蝇 Ei ee 3 


号 所 回 从. 向 国 


ew 
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14 添加 矩形 单 击 工具 栏 中 的 
“矩形 工具 ”按钮 ， 在 选项 栏 
和 
设置 填充 为 白色 ， 绘 制 矩 形 。 
之 后 设置 图 层 的 不 透明 度 为 
50%w， 如 图 困 困 所 示 。 


四 |_|n| wm s fxr | ™ 
5 加 


15 绘制 矩形 单 击 工具 栏 中 的 
“矩形 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 
设置 填充 为 和 白色， 绘制 矩形 。 
之 后 设置 图 层 的 不 透明 度 为 
30%， 如 图 国 园 所 示 。 


16 绘制 选区 单 击 工具 栏 中 的 
1 大 形 并 同属 岂 贞 家 风 绰 选 
项 栏 中 单 击 “添加 到 选区 ”按钮 ， 
绘制 矩形 选区 ,之 后 单 击 “图 层 ” 
面板 下 方 的 “添加 矢量 蒙 版 ” 
按钮 ， 如 图 图 国 所 示 ， 


Photoshop APP Ul 设计 从 入 门 到 精通 


7 更 多 效果 利用 相同 方法 给 
制 更 多 效果 ， 如 图 图 困 所 示 。 


「 王 这 :| 不 透明 度 : [5% | -| 
WE A 中 6。 [ia 


e | Hm| 二 :sa 下 
5 本 二 


| .| 生 六 4 拷 由 2 
5 六 回 仿 . 加 周 


18 添加 色 阶 单 击 “ 图 层 ” 面 
板 下 方 的 “创建 新 的 填充 或 
调整 图 层 ” 按 钮 ， 之 后 在 弹 
出 的 界面 中 选择 “ 色 阶 ”选项 ， 
接着 在 弹出 的 “属性 ”对 话 
框 中 设置 相应 参数 ， 如 图 图 
国 所 示 。 


19 绘制 阴影 新 建 图 层 ， 单 击 
二 上 其 栏 中 的 “画笔 业 具 ”按钮 ， 
在 选项 栏 中 选择 柔 角 画笔 ， 降 
低 不 透明 度 ， 设 置 前 景色 为 黑 
色 ， 绘 制 阴影 。 a 
的 不 透明 度 为 26%， 如 图 图 
所 示 。 


铁定 : 同 of 中 目 一 


» | ss: 
| Lb 5| | es 


局 国门 辣 椭圆 5 持 见 


和 属 


-186- 


之 0 创建 色彩 平衡 单 击 “ 图 层 ” 
面板 下 方 的 “创建 新 的 填充 或 
调整 图 层 ” 按 钮 ， 之 后 在 弹出 
的 界面 中 选择 “色彩 平衡 ” 选 
项 ， 接 着 在 弹出 的 “属性 ”对 
话 框 中 分 别 选择 “高 光 ” 中 间 
调 “ 阴 影 ” 选 项 ， 并 设置 相应 
参数 , 如 图 四 图 所 示 。 


之 上 调整 色彩 平衡 再 次 单 击 
“图 层 ” 面 板 下 方 的 “创建 新 
的 填充 或 调整 图 层 ” 按 钮 ， 之 
后 在 弹出 的 界面 中 选择 “色彩 
平衡 ”选项 ,接着 在 弹出 的 “ 属 
性 ”对 话 框 中 分 别 选择 “高 光 ” 
中 间 调 “阴影 ”选项 ， 并 设置 
参数 ， 如 图 四 加 所 示 。 


之 之 添加 中 间 文字 单 击 工具 
栏 中 的 “ 横 版 文字 工具 ” 按 
钮 ， 在 选项 栏 中 设置 字体 为 
| 
机 
为 日 色 ,i 输入 相应 久 字 ,| 如 图 
国 所 示 。 


UN 
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* | 不 迁 明 度 : 100%| 村 
EE 
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3 添加 上 下 方 文 字 单 击 工 
上 有 具 仿 中 的 “ 横 上 碑文 字 工 具 ” 按 
钮 ， 在 选项 栏 中 选择 设置 字体 
的 有 
和 
为 日 色 ， 输 入 相应 文字 ， 如 图 
团 所 示 。 


之 4 添加 下 方 文字 单 击 工具 栏 
中 的 “模版 文字 工具 ”按钮 ， 
在 选项 栏 中 设置 字体 分 别 为 
FredokalQneulbebas! Neue, ls 
1 TA WS em 2 Se 
颜色 为 折 色 ， 输 入 相应 文字 ， 
如 图 国 国 所 示 。 


人 添加 底部 文字 单 击 工具 栏 
中 的 “模版 文字 工具 ”按钮 ， 
在 选项 栏 中 选择 设置 字体 为 
Pacmfme ont ey i el 
闫 色 为 白色 ， 输 入 相应 文字 ， 
如 图 国 国 所 示 。 


TICKETS $18 » DOORS 23PM ~ 雯 = 


DJLAMONOFO * DJ DIAPOLMO « DJ SUNLI 


TIGKETS $18 » DOORS 23PM PY. 


二 | TT TICEETS $18 。 DOOR... 


| TT SUMMER kopilren 


es, ”三 


eT 日 
| 正常 ] 未 适 明度 : [i008| -| 
钙 定 : 加 w 中 看 拔 充 : [i009] -| 


ss 
| 工 SATURDAY 26 JUNE - 
sal 


SATURDAY 26 JUNE 
| TT vd LAMONOFO » DJ D0... 


二 国有 — Et7Flenish reseEn. .. 


NE 局 | 工 SATURDAY 26 JUNE 
DJ LAMONOFO » DJ DIAPOLMO 。 DJ SUNLI 


EC 沁 | TDTTLIawoworo。nTDmD. ™ 
5 产 .加 心 .大 国 闸 一 


EL 5 
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Ul 设计 师 必 读 : Apple 和 Android 移动 端 尺 寸 指南 


下 面 是 有 关 Apple 设 计 的 相关 资料 ， 包 括 各 种 界面 上 寸 、 图 标 凡 寸 、 图 形 部 件 


的 大 小 等 信息 。 


屏 怠 尺寸 lPoint=1/72 英寸 ( pt) 


图 标尺 十 


iPhone 4/4s iPhone 5/5s 
320 X 480pt 320 X 568pt 


iPad mini The New iPad 
768 X 1024pt 768 X 1024pt 


界面 图 标 : 


工具 栏 / 导航 栏 
20 X 20pt 
标签 栏 


30 X 30pt 


应 用 图 标 : 
应 用 商店 ( App Store ) 快捷 搜索 
20 X 20pt 29 X 29pt 


应 用 图 标 和 网 页 快捷 方式 
57 X 57pt 


钢 网 膜 文 持 : 

为 了 文 持 视网膜 分 辨 率 ， 所 有 的 定制 图 标 和 图 形 比 过 去 变 大 2 
倍 。 如 果 使 用 Photoshop 绘图 软件 ， 你 需要 将 尺寸 放大 2 信 ， 
然后 再 缩放 到 常用 尺寸 下 进行 设计 。 


2X 1x 
iPhone 4s iPhone 4 


iPhone 5s iPad The New iPad 
The New iPad iPad mini 


下 和 面 是 有 关 Android 设 计 的 相关 资料 ， 包 括 各 种 界面 尺寸 、 图 标尺 寸 、 图 形 部 件 的 大 小 等 信息 。 


屏幕 尺寸 设备 独立 像素 ( dip/dp ) 


小 屏 中 品 


320 X 426pt 320 X 470pt 


平版 (大 ) 平版 (超大 ，) 
480 X 640pt 720 X 960pt 


图 标尺 十 


界面 图 标 : 
操作 栏 

24 X 24pt 
内 容 显 示 


12 X 12pt 


应 用 图 标 : 启动 图 标 
应 用 商店 ( Google Play ) 
512X512pt 48X48pt 


多 种 屏幕 密度 文 持 : 
为 了 支持 所 有 不 同 屏幕 密度 的 设备 运行 ，Android 将 它们 归 为 
四 类 : LDPI，MDPI，, HDPI 以 及 XHDPI。 下 图 展示 的 图 像 支 
持 最 常见 的 屏幕 密度 MDPI，, 调整 你 的 设计 尺寸 ， 直 到 容易 输 
出 各 种 不 同 尺寸 的 图 为 宜 。 


一 


2X 1.5x 1x 0.75X 
XHDPul) DPI MDPI LDPI 


320dpi 240dpi 160dpi 120dpi 


本 章 主要 收录 了 5 个 开关 、 按 钮 的 实战 案例 , 涉及 图 形 的 绘制 、 
质感 的 表现 人 等 实用 设计 方法 。 通 过 这 些 练 习 ， 可 以 帮助 读者 随 
心 所 谷地 制作 出 各 类 完美 的 控件 效果 。 


控件 制作 

塑料 质感 表现 
金属 质感 表现 

半 透 明 玻璃 质感 表现 
如 何 设计 按钮 


人 国人 国人 国信 


人 、 


TV Channel pm, Tus, Dee 15 


| B-00pm B30pm :00pm :30pm 
El. l Mowvle | 


MAGAZINE 
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@ 光盘 路 径 
Chapter 10/Media 


Leve 一 一 一 一 旋钮 是 边缘 刻 有 一 个 或 一 系列 标号 的 普通 圆 形 突出 物 、 圆 盘 或 标 度 
盘 , 可 将 其 旋转 或 推进 拉 出 , 以 此 局 动 并 操纵 或 控制 茶 物 。 旋 钮 在 生活 中 随 


=TKSj[elll 


CS4 6S5 CS6 CC 处 可 见 ， 以 旋钮 为 设计 主体 的 作品 大 多 是 写实 、 通 真 的 。 


本 例 中 这 个 立体 感 十 是 的 息 色 旋钮 灵感 来 目 于 生活 中 随处 可 多 的 旋钮 开关 。 议 计 师 采用 
写真 的 方法 绘制 旋钮 ， 首 先 绘制 半 透 明 效 果 的 凹陷 外 盘 ， 其 次 绘制 具有 立体 感 的 旋钮 主体 ， 
最 后 绘制 细 市 以 及 刻度 。 


Q1 新 建文 件 执行 “文件 > 
新 建 ” 命 令 ， 或 按 下 快捷 键 
OVE IN re ey a 
对 话 框 中 新 建 宽度 和 高 度 分 别 
轩 1800XI600| 角 半 Ja a 
完成 后 单 击 “ 确 定 ” 按 钮 结 
操作 ， 如 图 辆 加 所 示 。 


册 国 索 
2 添加 图 案 本 加 双击 背景 图 saxo sss . 
Ni 如 、 六 不 透明 度 (Y) : ey 55 二 
屋 ， 解 锁 背 景 图 层 。 之 后 单 击 
“图 屋 ” 面 板 下 方 的 “添加 图 -| | = 


ja hy I ha 
菜单 中 选择 “图 案 释 加 ”选项 ， 
设置 参数 ， 添 加 图 案 营 加 效果 ， 
如 图 国 辆 所 示 。 
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〇 3 绘制 椭圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ,在 选项 栏 
PH 2 4 A 天 砍 全 
J mae 4 
到 “椭圆 1” 图 层 。 之 后 设置 
图 层 的 填充 为 0， 不 透明 度 为 
50%， 如 图 国 因 所 示 。 


〇 4 添加 内 阴影 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 内 阴影 ”选项 ， 设 置 参数 ， 
添加 内 阴影 效果 ， 如 图 贺 四 
所 示 ， 


( 〇 5 添加 渐变 要 加 单 击 “ 图 层 ” 
男 极 | 肘 Wy 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
Fe 低 
数 ， 添 加 渐变 喧 加 效果 ， 如 图 
四 四 所 示 。 


O6 添加 投影 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样 式 ” 按 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 
“投影 ”选项 ， 设 置 参数 ， 添 
加 投影 效果 ， 如 图 国 贺 所 示 。 


(OO / 绘制 椭圆 单 击 工具 栏 中 
的 “椭圆 工具 ”按钮 ， 在 选项 
栏 中 选择 亚 具 的 模式 为 “ 形 
NE 
“Shift> 键 绘制 正 圆 ， 得 到 “ 权 
2” 图 层 ， 如 图 国 四 所 示 。 


为 际 影 
给 构 
混合 模式 (B) : 
不 透明 度 (0) : 


锡 度 (A): | 8 | 90 


-EM 


45 和 


度 加 | 使 用 全 局 光 (c) 


正高 (D) -a 2 位 素 

阻塞 {c) : 人 0 % 

大 小 (S) : gs 6 丛 索 
品质 


等 高 线 : | - 同 消除 狼 上 (位 ) 中 


渐变 
源 合 模式 (0) : 
不 透明 度 (P) : 


正片 谷底 


样式 (L) : ”线性 
高 度 (N) = | On] 90 
缩放 {S) : 


混合 模式 (B) : ”正常 
不 透明 度 (0) : 


角度 (A) : Is 90 


焉 高 {D) : 
扩展 (R) : 全 
大 小 (S) = 


元 豆 


sea: | - 


20 % 


下 区 与 图 层 对 齐 (I) 


100 多 
加 
| 因 
四 
100 9 
度 回 ] 使 用 全 局 光 {G) 
2 位 素 
0 % 
2 伶 素 


| 深 险 内 详 (L) 


[下 本 oo -| 
民生 四 of 中 看 革 充 : [i008] =] 


| 
椭圆 2 
Ld 


sm 
重 ， 东 时 


| 时 
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O8 添加 内 阴影 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 内 阴影 ”选项 , 设置 参数 ， 
添加 内 阴影 效果 ， 如 图 因 
所 示 。 


〇 9 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 渐 变革 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 车 加 效果 ， 如 图 
困 所 示 . 


1 0 添加 图 案 权 加 双击 背景 图 
层 ， 解 锁 该 图 层 。 之 后 单 击 “ 图 
层 ” 面 板 下 方 的 “添加 图 层 样 式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 先 
择 “ 图 案 释 加” 选项， 添加 图 
案 登 加 效果 ， 如 图 困 加 所 示 。 


1 添加 投影 单 击 “图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ”按钮 ， 
在 弹出 的 下 拉 菜单 中 选择 “ 投 
影 ”选项 ， 设 置 参数 ， 添 加 投 
影 效果 ， 如 图 团 园 所 示 。 


1 2 复制 图 层 单 击 “ 椭 圆 2” 
图 层 ， 按 下 XCtr1+J》 组 合 键 复 
制图 层 ， 石 键 单 击 该 图 层 ,之 
后 在 弹出 的 快捷 菜单 中 选择 “ 清 
除 图 层 样 式 ” 选 项 ， 设 置 图 层 
的 填充 为 0， 如 图 图 园 所 示 。 


内 际 影 
每 构 
源 合 模式 (6B) : 正片 全 底 | 
不 透明 度 (0) :FS 30 % 
襄 度 (a)- (| —90 使 用 全 局 光 {G) 
正高 (D) : ge 6 像素 
限 塞 (C) : (= 0  % 
大 小 (S) :PS 6 偿 素 
部 捉 
su: | - 同 蒂 阶 峰 远 代 ) 
海 专 
混合 模式 (9) : 正常 了 图 仿 色 
不 透明 度 {(P) : eys 12 % 
六 [| Da 
样式 (L) : 线性 = 图 与 图 层 对 齐 (IT) 
鲍 度 (N) : | | | 30 度 
编 放 (S) = = 100 zz 
| 设置 为 拷 认 位 | | 复位 为 于 认 位 | 
到 索 
混合 模式 (6) : 正常 v 
不 透明 度 (Y) :PS 5 % 
名 贴 紧 原 志 (4) 


混合 模式 (B) : 

不 透明 度 (0) : 
角度 (人 A) : | 
距离 {D) : 


扩展 (R) : 
大 小 (S) : 


TI 


~ 国 国 
20 多 
使 用 全 局 光 {(G) 
12 位 索 
20  % 
20 丛 素 
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撞 边 
1 3 添加 描 边 Es < 一 
板 下 方 的 “添加 图 层 样式 ”按钮 ， ad 
在 弹出 的 下 拉 菜 单 中 选择 “ 描 。 as 吉 e . 


不 透明 度 (0) :一 100 % 


边 ” 选 项 ， 设 置 参数 ， 添 加 描 
边 效果 ， 如 图 图 园 所 示 。 


境 充 类型 (F): 海 变 v 


Wi: | a 


样式 人 (L) : 线性 v |Y| 与 回 导 对 齐 (G) 
U 四 
后 园 


投影 


14 添加 投影 单 击 “ 图 层 ” 面 号 构 
板 下 方 的 “添加 图 层 样 式 ” 按 。 现 合 模式 亿 ) : 本色 加 深 ~ 加 


天 ,| 在 弹出 的 下 近 莱 单 中 选择 | “一” 
ee en \ / 
加 投影 效果 ， 如 图 图 困 所 示 。 pe me Ned 

大 小 (5) : gs 8 ”人 乙 素 
15 给 制 椭 图 沂 建 图 层 ， 单 击 a | 甬 主人 和 
工具 栏 中 的 “椭圆 工具 ”按钮 。 es 
在 选项 栏 中 选择 柔 角 画笔 ， 调 上 
低 不 透明 度 ， 设 置 前 景色 为 白 ® Fr me 
色 ， 绘 制 高 光 。 之 后 将 图 层 移 \ : -a 
2 We @| |] 翅 tr 
图 困 国 所 示 。 : 0 


16 绘制 阴影 新 建 图 层 ， 单 击 


工具 栏 中 的 “椭圆 工具 ”按钮 ， IEEE 
在 选项 栏 中 选择 柔 角 画 笔 ， 调 EN Ee 


| Va, | 镶 定 : mE 
低 不 透明 度 ， 设 置 前 景色 为 黑 ee 


色 ， 绘 制 阴影 。 之 后 将 图 层 移 
Ey BU woah fH 0 
图 国 国 所 示 。 


17 给 制 正 加 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 和 
中 选择 工具 的 模式 为 “形状 ”， 本 EE 日 
设置 填充 为 灰色 (R: 232，6G: 
23200 Bs 2 ee Shan te 
键 绘制 正 贺 ， 得 到 “椭圆 3” 
图 层 ， 如 图 图 国 所 示 。 
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18 添加 描 边 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ”按钮 ， 
在 弹出 的 下 拉 菜 单 中 选择 “ 描 
边 ”选项 ， 设 置 参数 ， 添 加 描 
边 效 果 ， 如 图 困 国 所 示 。 


19 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 渐 变 否 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 释 加 效果 ， 如 图 
图 所 示 。 


人 0 添加 投影 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ”按钮 ， 
在 弹出 的 下 拉 菜 单 中 选择 “ 投 
影 ”选项 ， 设 置 参数 ， 添 加 投 
影 效 果 ， 如 图 国 四 所 示 ，。 


人 1 绘制 正 圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”。 
之 后 按 下 <Shift> 键 绘制 正 圆 ， 
得 到 “椭圆 4” 图 层 ， 设 置 图 
层 的 填充 为 0, 如 图 加 辆 所 示 。 


之 之 添加 描 边 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ”按钮 ， 
在 弹出 的 下 拉 亲 时 中 选择 生 搞 
边 ” 选 项 ， 设 置 参数 ， 添 加 描 
边 效 末 ， 如 图 图 园 所 示 。 


撞 近 
大 小 (S) : J 后 喜 
位 置 (PF): 外 部 v 

源 合 模式 (B) : 正常 - 

不 透明 度 (0) :eye 40 = 


填充 类 型 {F): 渐变 vv 


[| Va 


样式 (L): 线性 v ”|vV| 与 图 层 对 齐 (G) 
加 加 
全 B: 182 傅 
汤 合 模式 (0) : 正常 v | 回 仿 色 
不 透明 度 (PF) : 国 % 


sx: [| a 


样式 (L) : 线性 图 | 与 图 层 对 齐 {I) 
秆 度 (人 : | 有 so 一 度 


缩放 (S) : eo 5()  % 


设 秆 为 默认 位 复 包 为 默认 位 


投影 

小 构 

混合 模式 {B) : 正常 

不 和 进 明 度 (0) :eye 75 % 


角度 人 A): | 4 | 90 度 回 使 用 全 局 光 (c) 


下 高 (D) : pe 4 像素 
扩展 (R): /0% 
大 小 (5S) : /一 2 像素 


T I 


- 
sue: | - 问 清 哈 刚才 (L) 


描 边 
大 小 (8) An 日 傍 素 
位 置 (P): 外 部 v 

源 合 模式 (6) : 正常 v 

不 透明 度 (0) : c= 100 % 
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Photoshop APP Ul 设计 从 入 门 到 精通 


、 尖 阴 影 
之 3 添加 内 阴影 单 击 “ 图 层 ” sr 
面板 下 方 的 “添加 图 层 样式 ” 混合 模式 (B) : 去 色 减 湾 
下 | Wl | 不 透明 度 (0) : cys 19 % 
按钮 ， 在 弹出 的 下 拉 羔 单 中 选 < | © 
2 乓 上/ 9%》 、 、\JL Ed i EW 于 30 度 加 使 用 全 局 光 (G) 
择 “ 内 阴影 ”选项 ,设置 参数 ， 了 6 () :2 人 


添加 内 阴影 效果 ， 如 图 四 0: 4 9 


| 大 小 (5) : CS 0 | 像素 
站 品 


却 
等 高 线 : ~ 沈 险 锋 壕 (L) 
3 | ] 除 独 次 人) 


光泽 BA 


24 添 二 光泽 单 击 “ 图 层 ” 面 -< 于 
板 下 方 的 “添加 图 层 样式 中 接 几 四: ae 


不 透明 度 (0): FS 5]1 % : 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 锡 度 (N): | ] -30 度 
i yt 痒 和 选项 》 设置 参数 》 湛 距 高 人 ) : ~ 12 。 像素 
人 大 小 (8): pe 了 一 像素 
加 光 洋 效果 ， 如 图 国 国 所 示 。 区 和. [而 -| 团 清除 狗 兴 (L) 
区 | 反 相 (I) 


[设置 为 执 认 位 | | 复位 为 默认 位 | 


2 5 弘扬 变 要 加 单 击 “图 层 ” 


面板 下 、 的 > JR 有 Cs ee 正常 天 
方 的 “添加 图 层 样式 不 进 明 度 (B): 一 二 

y 荣 音 中 ; “= [| 中 二 
择 户 ， 在 中 出 的 下 拉 羔 单 中 选 样式 {L) : 线性 v 贺 与 图 层 对 齐 (了 © 
择 “ 渐 变 登 加” 选项， 设置 参 en 


天) 次 加 渐变 和 登 加 效果 9 如 编 放 (S) : 100 多 
加 所 示 。 Ta 


26 钴 制 矩形 单 击 工具 栏 中 的 
“和 沧 形 工具 ”按钮 ， 在 选项 栏 


中 选择 工具 的 模式 为 “形状 ”， Ex [2 
设置 填充 为 黑色 ， 绘 制 矩形 。 A 
划 局 要 IRON 组 全 | 

转 窍 形 ， 按 下 《Enter> 键 结束 © [a me 4 

操作 。 接 着 设置 图 层 的 填充 为 Se 

153%， 基 图 国 园 所 不。 5 友 . 回 信和 店 辕 
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J 复制 矩形 按 下 “Ctrl+C》 
组 合 键 ,再 按 下 《Ctrl+V> 
组 合 键 复制 矩形 。 之 后 按 
| 
中 心 点 从 而 旋转 矩形 ， 按 下 
《Enter》 键 结束 。 最 后 按 下 
SITE 
复制 并 旋转 矩形 ， 如 图 国 
所 示 。 


人 8 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 先 
择 “ 渐 变 炙 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 大 加 效果 ， 如 图 
国 所 示 。 


2Z9 添加 投影 单 击 “图 层 ” 面 
板 下 方 的 “添加 图 层 样 式 ” 按 
钮 ， 在 弹出 的 下 拉 荣 单 中 选择 
“投影 ”选项 ， 设 置 参 数 ， 添 
加 投影 效果 ， 如 图 国 国 所 示 。 


了 3 调整 色调 设置 前 景色 为 
RO 8B. 
3D eat EH i 
的 “创建 新 的 填充 或 调整 图 层 ” 
按钮 ， 选 择 “ 纯 色 ” 选 项 ， 设 
EE A 
不 透明 度 为 50%， 完 成 本 案例 
设计 ， 如 图 国 国 所 示 。 
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@ 
渐变 
混合 模式 (9) : ”和 霍 加 v | 回信 和 色 
不 透明 度 (P): ep 5 % 
“=: [1] ss 
样式 (L) : 线性 了 ”| 凡 与 图 层 对 齐 (I) 
角度 (N): | 。 | -149 度 
缩放 (S): cy 61 % 
设置 为 讨 认 但 复位 为 默认 位 
投影 
小 构 
源 合 模式 (5B) : 正常 Y 
不 透明 度 (0) : ey 12 = 
© 
锡 度 (A): (| 50 度 回 使 用 全 局 光 (G) 
焉 离 {D) : 7 2 僚 素 
扩展 (KR) : 5 0 多 
大 小 (5) : AS 0 像素 
品质 
see: | - 回 | 清除 锯 类 (1) 
© 


[ 柔 光 *| 不 条 明度: 
钙 定 : 四 of 中 徊 。 苇 充 : [i00%] -| 
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Level 


Mssle]n 
CS4 CS5 CS6 CC 


在 本 例 中 ， 设 计 师 以 控制 开关 为 创作 灵感 ， 


Photoshop APP Ul 设计 从 入 门 到 精通 


医 


fz 上 TI 一 白 = A = a 

y= Ws | i DA 图 | 三 | 本 [7 1 订户 工 y 三 刀 上}: i 

二 口 pA 则 三 八 4 魏 | 器 三 二 口 pA | 立 | | 二 不 工 下 \ 
| 全 | 人 记 1Iz EE | 日 bay| a re 大 区 | BS vl fs 十 二 V 


@ 光盘 路 径 
Chapter 10/Media 


开关 与 我 们 的 生活 因明 相关 ， 在 生活 中 随处 可 见 ， 其 利用 按钮 推动 传 
动机 构 ， 使 动 触 点 与 评 触 点 控 通 或 断 开 并 实现 电路 切换 的 。 以 开关 为 设计 
灵感 时 ， 需 要 先 观 察 开 关 的 构造 ， 然 后 再 加 上 目 己 的 创意 。 


先 制作 浅 色 的 背景 ， 通 过 渐变 车 加 等 图 层 样 


却 表 现 日 色 塑 料 质 感情 座 ， 再 利用 相似 的 手法 来 表现 绿色 滑动 框 以 及 白色 滑动 按钮 的 塑料 质 


感 ， 最 后 通过 图 层 样式 的 登 加 制作 指示 灯 。 


QO1 新 建文 件 执行 “文件 > 
新 建 ” 命 令 ， 或 按 下 人 快捷 键 
ROLEN2> 则 天 于 Hh 7 0 a 
对 话 框 中 新 建 宽度 和 高 度 分 别 
为 400X300 像素 的 空白 文档 ， 
完成 后 单 击 “ 确 定 ” 按 钮 结 
操作 ， 如 图 辆 贺 所 示 。 


(2 添加 渐变 要 加 双击 背景 图 
层 , 将 其 解锁 ,之 后 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 先 
择 “ 渐 变 释 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 琶 加 效果 ， 如 图 
加 所 示 。 


渐变 和 登 加 


渐变 
混合 模式 (0) :正常 ~| 回 仿 色 
不 透明 度 (P) Te 5 


xs 


样式 (L): 线性 ”| 多 | 与 图 司 对 齐 (1) 


条 度 (8): (| so 一度 


缩放 (S): ee 100  % 


| 设置 为 于 认 位 | | 复位 为 就 认 位 
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〇 3 给 制 外 部 国 角 短 形 单 击 工 | 


陪 径 
PDP 类 型 ?| 国 台 荆 口 明 目 


具 栏 中 的 “ 圆 角 和 矩形 工具 ” 按 / 要 站 3] 不 各 明度 : [1005] ~ ] 
钮 ， 在 选项 栏 中 选择 工具 的 模 | IE 
pt tN ei | 


半径 为 100 像素 ， 绘 制 圆 角 矩 。。“ & Sa 


| D> | @® 光 生 加 1 
I A a sa, /所 加 ©O 白 加 人 痢 
0. 06 


如 图 国 园 所 示 。 
为 隔 影 
〇 4 添加 内 阴影 单 击 “图 层 ” 一 结 和 一 本 


混合 模式 (B) : ”正片 登 底 ~ 国 玫 


面板 下 方 的 “添加 图 层 样式 ” 不 透明 度 (0) : 13 % 
按钮 ， 在 弹出 的 下 拉 荣 单 中 选 角度 他 ) : ( 1) 90 ” 度 回 | 使 用 全 局 光 (G) 


择 “ 内 阴影 ”选项 ， 设 置 参 数 ， se:< a 
CS 0 % 
添加 内 阴影 效果 ， 如 图 团 因 大 小 (s): 5 3 一 像素 
所 示 。 鞠 隔 
等 高 线 - 


a 
05 添加 渐变 下 加 单 击 “图 层 混合 模式 (0) : 正常 > 回访 色 
面板 下 方 的 “添加 图 层 样式 ” 不 条 明度 (P): cys 3% 


| | Wo = [| <) 
按 馈 ， 在 弹出 的 下 拉 菜 单 中 选 样式 (L) : 贱 性 v 贺 与 图 层 对 齐 (IT) 
择 “ 渐 变 登 加 ”选项 ， 设 置 参 条 度 (0): (| “50 一 度 
数 ， 添 加 渐变 登 加 效果 ， 如 图 绽放 (5): yg 00 
四 四 所 示 . 


投影 


06 添加 投影 单 击 “ 图 层 ” 面 。“&。 
板 下 方 的 “添加 图 层 样 式 ” 按 总 代 式 (5): 站 色 = | 
NN eT 上 不 透明 度 (0) : c= 100 多 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 了 
、 本 角度 人 ): | ， ) 90 。 度 回 使 用 全 局 光 (G) 
“投影 ”选项 ， 设 置 参 数 ， 添 -= 
加 投影 效果 ， 如 图 国 转 所 示 。 1 0 % 


党 险 锯 闫 (L) 


(OO / 绘制 内 部 加 角 短 形 单 击 工 
具 栏 中 的 “ 圆 角 和 矩形 工具 ”按钮 


在 选项 栏 中 选择 工具 的 模式 为 | La 2E 


“形状 ”， 设 置 填充 为 绿色 〈R: 
W366 Ge 2 2 OD 4 
为 100 像素 ， 绘 制 圆 角 算 形 ， 

得 到 “ 圆 角 矩形 2” 图 层 ， 如 
图 困 四 上 折 示 。 


Photoshop APP Ul 设计 从 入 门 到 精通 


08 添加 内 阴影 单 击 “ 图 层 ” “下 
面板 下 方 的 “添加 图 层 样 式 ” 混合 模式 (B) :正片 全 岂 - EN 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 不 透明 度 (0): FS 59  % 


高 度 (A) : 全 | 人 SN 度 站 | 使 巨 全 局 光 {Gc) 
择 “内 阴影 ”选项 ， 设 置 参数 ， 二 


距离 (D) : 45 1 傍 素 
添加 内 阴影 效果 ， 如 图 因 限 村 (c) : CS 0 
员 大 小 (5) go 一 5 像素 
所 示 。 
品质 
sss:| A. 回潮 除 锋 才 人) 
66 一 2》 这 变 -= 
09 和 inf tt 
面板 下 方 的 “添加 图 层 样式 ” 了 由 : 一 5 
; 、 可 | S| Vr) 
控 钮 ， 在 弹出 的 下 拉 亲 单 中 选 样式 (L) : 线 位 > 团 与 图 层 对 齐 (1) 
择 i 渐 il i wn 设置 参 名 度 (3): (C1) 50 一 度 
数 ， 添 加 渐变 膨 加 效果 ， 如 图 给 放 (5): ys 100 
国 所 未 。 
6 2 | 
TO 添加 图 案 要 加 单 击 “图 层 Oe. 
面板 下 方 的 “添加 图 层 样式 ” 0 
按钮， 在 弹出 的 下 拉 菜 单 中 移 = 
择 ”图案 司 加 ” 迄 项 ， 设 置 参 而 二 曾 丽 | * 
| 了 2 六 | 3 | 
数 ， 添 加 图 案 登 加 效果 ， 如 图 | I 
团 所 未 。 
、 66 99 - 投影 一 -一 一 
1 1 添加 投影 单 击 “ 图 层 " 面 “一 
板 下 方 的 “添加 图 层 样 式 ”按钮 ， 四 : 并 ~[ 
| Wa nn l 不 和 明度 (0) : 所 CO 
在 弹出 的 下 拉 菜 单 中 选择 “ 投 
py Wn | 钊 度 人) :人 ) 30 度 回 使 用 全 局 光 (G) 
影 效果 ， 如 图 团 图 所 示 。 -i 
大 小 (5): 上 二 像素 
所 所 
sss:| 4 问 潮 除 多 直人 ) 


1 2 绘制 矩形 单 击 工具 栏 中 的 
“矩形 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 

绘制 矩形 ， 得 到 “矩形 1” 图 
层 。 之 后 设置 图 层 的 不 透明 度 
为 83%， 填 充 为 0， 如 图 图 
所 示 。 
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3 合并 形状 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
中 选择 “合并 形状 ”选项 ， 绘 
制 正 圆 ， 如 图 困 园 所 示 ，。 


1 4 添加 内 阴影 单 击 “ 图 层 ” 

Py a a i We 

按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 内 阴影 ”选项 ， 设 置 参 数 ， 

添加 内 阴影 效果 ， 如 图 园 
所 示 。 


1 5 添加 渐变 到 加 单 击 “ 图 层 ” 
Ly 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 渐 变革 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 三 加 效果 ， 如 图 
国 所 未 。 


16 添加 投影 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ”按钮 ， 
在 弹出 的 下 拉 菜 单 中 选择 “ 投 
影 ” 选 项 ， 设 置 参数 ， 添 加 投 
影 效 果 ， 如 图 园 园 所 示 。 


和 了 绘制 椭圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 

设置 填充 为 白色 ， 绘 制 正 圆 ， 

得 到 “椭圆 1” 图 层 ， 如 图 图 
国 所 示 . 


兴 隔 影 


混合 模式 (B) : 正片 生 底 ~ 国 
不 透明 度 (0) PC 5 


第 度 他 ) : ( | ) 30 ” 度 同 合 用 全 局 光 (6) 


距离 (D) : AS 1 从 索 
阻塞 (0) :9 0 


大 小 (5) : < 


起 


后 
等 高 线 : [4 同 清除 闫 尖 (L) 


渐变 


混合 模式 (0) : 正常 = 回 仿 色 


不 透明 度 (P): ey 56  % 


ACT Ma 


样式 (L) : 线性 Y 加 与 图 屋 对 齐 (I) 


条 度 (W): (50 一 度 


图 加 
便 RSS Ri 235 白 
B: 235 
投影 
竺 
混合 模式 (BE) : 滤 色 -| | 
不 透明 度 (0) : ZY 100 % 
条 度 (A): (50 一 度 回 使 用 全 局 光 (G) 
丐 离 (D) : Pe 1 余 素 
扩展 (R) : 所 0 和 多 
大 小 (5) : < 0 余 素 
品质 
等 高 线 : ”| 加 | 清除 败 尖 (L) 团 
| ] 31 
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| 正常 $ | 不 透明 度 : 
铁定 : 加 sf 中 看 某 充 : [ok |-| 


时 矩形 1 
上 上 区 
时 于 ” 园 先 拒 形 2 fr 
加 落果 
时 为 阴影 到 


es 


1 8 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 渐 变 熙 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 受 加 效果 ， 如 图 
国 所 示 。 


19 添加 投影 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ”按钮 ， 
在 弹出 的 下 拉 菜 单 中 选择 “ 投 
影 ” 选 项 ， 设 置 参数 ， 添 加 投 
影 效 果 ， 如 图 国 国 所 示 ，。 


2O 复制 图 层 单 击 “椭圆 1” 
图 层 ， 按 下 “Ctrl1+J> 组 合 键 复 
制图 层 。 之 后 将 形状 向 下 平移 ， 
为 椭圆 填充 黑色 ， 石 键 单 击 图 
层 , 选择 “清除 图 层 样式 ”选项 ， 
设置 图 层 的 填充 为 56%， 如 图 
四 所 未 。 


之 1 添加 高 斯 模糊 执行 “ 滤 
镜 》 转换 为 智能 滤 镜 ”命令 ， 
再 执行 “ 滤 镜 > 模糊 高 其 
模糊 ”命令 ， 在 弹出 的 “高 
斯 模糊 ”对 话 框 中 设置 参数 ， 
单 击 “ 确 定 ” 按 钮 结束 操作 ， 
将 图 层 移动 到 “椭圆 1 ”图 层 
下 方 ， 如 图 国 四 所 示 。 


22 绘制 形状 单 击 工具 栏 中 的 

“钢笔 工具 ” 按 饥 ,在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 
设置 填充 为 黑色 ， 绘 制 形状 ， 
得 到 “形状 1” 图 层 。 之 后 设 
置 图 层 的 不 透明 度 为 40%， 如 
图 图 加 所 示 。 


Photoshop APP Ul 设计 从 入 门 到 精通 


渐变 
源 合 模式 (0) : 正常 了 回信 色 
不 透明 度 (P) : yg % 
sx | a 
样式 (L) : 贱 性 了 届 | 与 图 层 对 齐 (I) 
角度 (N) : (1 ] 90 度 
缩放 (5) : 一 一 一 一 天 一 一 100 多 
设 加 为 就 认 位 复 凶 为 就 认 位 
投影 
源 合 模式 (B) -正片 合 底 ~ 国 四 
不 适 明度 (0) : y= 3 5 
角度 人 :人 人] 30 一 度 回 使 用 全 局 光 (G) 
下 高 (D) rr 了 像素 
扩展 (R): [= 0 5 
大 小 (5): gs | 信 示 
元 豆 
等 高 线 : 站 涪 险 锯 闫 (L) 团 
- 37 


图 层 【通道 路径 丘 
|1P 类 有 $| 加 名 荆 品 明 四 
[2 |] 不 oon] -| 
铁定 : 加 w 中 个 党 充 : [56% |-] 


®» .gm 0. 9 sp 


加 预览 下) 


日 


半径 (R): 
ER 人 JP 
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[4 


四 oOTIS 男 


去 轩 轩 有 目 
| 类 型 * 


[ 王 党 | 不 迁 纪 度 : 


锁定 : 四 w 中 四 填充 :|1oox| > | 
Er 
® | 形状 1 
融 l 
© 司 _ 
| | 
® | Wn (中 > 
9 友 . 回 刀 . 和 外 蜂 


人 3 添加 高 斯 模糊 执行 “ 渡 
镜 > 转换 为 智能 滤 镜 ”命令 ， 
再 执行 “ 滤 镜 > 模糊 > 高 其 
模糊 ”命令 ， 在 弹出 的 “高 
斯 模糊 ”对 话 框 中 设置 参数 ， 
单 击 “确定 ”按钮 结束 操作 ， 
如 岁 困 四 所 示 。 


之 4 绘制 右 侧 椭 圆 单 击 工具 栏 
yt 
Ds 
状 ”， 设置 需 充 为 水 色 (R:95， 
Gol Om ea 2 nl 
得 到 “椭圆 2” 图 层 ， 如 网 图 
闸 


之 D 添加 斜面 和 浮雕 单 击 “ 图 
层 ”面板 下 方 的 “添加 图 层 样 
式 ” 按 钮 ， 在 弹出 的 下 拉 菜 单 
中 选择 “斜面 和 浮雕 ”选项 ， 
设置 参数 ， 添 加 斜面 和 浮雕 效 
果 ， 如 图 国 团 所 示 ，。 


2 添加 描 边 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ”按钮 ， 
在 弹出 的 下 拉 菜 单 中 选择 “ 描 
边 ” 选 项 ， 设 置 参数 ， 添 加 措 
边 效 果 ， 如 图 团 国 所 示 。 


之 / 添加 内 发 光 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 内 发 光 ” 选 项 , 设置 参数 ， 
添加 内 发 光 效果 ， 如 图 国 
所 示 。 
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四 层 大 


:| 不 透明 度 : |99% | > 
人 四 2/ 中 日 有: [天 


| 亚 千 


绎 可 和 渗 蓝 
千 析 
样式 (T) : ”内 斜面 v 
方法 (9) : 平滑 v 
深度 (D) : ; 
方向 : © 上 € 下 
大 小 (Z): go 一 一 售 未 


软化 (F) :ee 4 从 素 


际 影 

高 度 (N) : -45 度 
| 名 | 回 使 用 全 局 光 (G) 
南座 Sn co | 到 


光泽 等 高 线 : | -| 加 党 险 锯 尖 (1) 


高 光 模 式 (H) : 
不 透明 度 (0) :eps 38 % 
卫 影 模式 (A) : 正常 | 


不 透明 度 (C) : ~ 0 % 


位 置 {F) : 
广告 模式 避 ) : 正常 ™ 


不 透明 度 (0) : 100 % 


一 ”填充 尖 型 {F}: 部 笃 * - 站 
。 RR: 38 
EE 四 


内 部 = 


结构 
泥 合 模式 {B) : 正片 登 底 M 
不 透明 度 (0): cy 43 % 
杂 色 (N) : [SP (0 % 
5 于 O 
图 素 
方法 {Q): 柔和 vv 
源 : 加 后 中 (E) ”加 边 综 (6) 
限 塞 (C) : (一 ==> 0 % 
人 :TH 一 一 多 


人 AB 
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2 38 活 加 浙 变 要 加 单 击 “图 民 ”一 


混合 模式 (0) : 正常 v 回信 和 色 
面板 下 方 的 “添加 图 层 样 式 ” raseo: 一 rg 一 一 盏 -。 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 二 于 | 
择 “ 渐 变 倒 加 ”选项 , 设置 参 ssw/ 人 5 | 
数 ， 添 加 渐变 全 加 效果 ,如 图 sx9: 一 一 二 一 
国 团 扩 未。 [设置 为 默认 位 “] | 复位 为 默认 位 


EE 


9 添加 图 案 要 加 单 击 “ 图 层 ” a 


BR 二 而 辐 必 f | 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 = 
择 “ 图 案 登 加 ”选项 ， 设 置 参 
数 ， 深 加 图 案 全 加 效果 ， 如 图 
国 所 示 。 


30 添加 外 发 光 单 击 “ 图 层 ” “2 一 
面板 下 方 的 “添加 图 层 样式 ” 温 合 模式 但) -正片 鸽 底 

按钮 ， 在 弹出 的 下 拉 菜 单 中 选 “了  ” ， 

择 “ 外 发 光 ” 选 项 ， 设 置 参数 ， 站 图 
添加 外 发 光 效果 ， 如 图 国 国 “ 二 枉 - 


所 示 。 方法 (由: 柔和 = 
扩展 中: /0 


投影 
31 添加 投影 单 击 “ 图 层 ” 面 sh 
板 下 方 的 “添加 图 层 样式 ”按钮 ， pe 亚 片 生 庆 ~ mn 


AE 入 度 (4) 


:Ms 度 回合 用 全 局 光 (G) 


是 we 设置 参数 ， 添加 投 正言 D): 一 3 丛 素 

车 这 谨 = 扩展 (R) -CPP 0 % 

影 效果 ， 如 图 团 加 所 示 。 Ep 一 
此 责 


等 高 线 : 


清 阶 网 贞 ( 代 ) 


32 复制 图 层 单 击 “ 顶 圆 ER 


区 | Oo > 组 合 键 复 站 正常 和 | 不 透明 度 : 
制图 层 ， 右 键 单 击 图 层 ， 选 择 锁定 : 困 of 中 四 苇 充 : [1003]-] 
“清除 图 层 样式 ”选项 ， 如 图 ® | 网 四 2 状 
加 所 示 。 = Ee 椭 加 2 所 加 
吧 落 呆 
加 兰 画 和 尘 双 
3 .加 ©. 和 语 同 
[| 


WU 
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33 绘制 正 圆 单 击 工具 栏 中 的 
“椭圆 工具 ” 按 包 ,在 选项 栏 
i de TL PR ty 0 HN , 

议 置 填充 为 白色 ， 绘 制 正 圆 ， 

a Es di 
置 图 层 的 填充 为 58%， 如 图 国 
国 所 未 。 


外 发 光 


号 人 给 制 外 发 光 单 击 “图 民 ” < 
面板 下 方 的 “添加 图 层 样式 ” | 2 站" ， 


按钮 ， 在 弹出 的 下 拉 菜 单 中 选 。。 办 %:5 一 一 一 5 
择 “ 外 发 光 ” 选 项 , 设置 参数 ， “一 


图 素 
添加 外 发 光 效 果 ， 如 图 园 国 方法 (Q): 柔和 
出 扩展 (P): /0% 
所 示 。 大 小 (5): gs 5 伪 素 
中卫 
等 高科 -| 回 清 险 锋 送 全) 
范围 (R) : a 50 % 


幸 动 {DD) : 5 0 % 因 


也 D 绘制 正 圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
We FE Th A A 

设置 填充 为 白色 ,绘制 正 圆 ， 

Te I) a A a i 
莹 图 层 的 填充 为 74%， 如 图 国 
四 所 示 。 


外 发 光 


36 添加 外 发 光 单 击 “ 图 层 ” sr 
面板 下 方 的 “添加 图 层 样式 ” seeee 站 _，， 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 sw:a 
择 “ 外 发 光 ”选项 , 设置 参数 ， | “一 


添加 外 发 光 效 果 ， 如 图 加 方法 (Q): 系 和 


扩展 (P) :CPP 人 % 


所 示 。 大 小 (5) :ge 5 像素 
元 所 
等 高 引 : [4 回潮 除 锋 尖 () 
范围 (R) ee 50 % 
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允 趴 的 金属 计 感 旋钮 


@ 光盘 路 径 
Chapter 10/Media 


如 今 ， 主 流 的 图 标 风 格 还 是 以 简洁 为 主 ， 越 简单 则 越 会 受到 人 们 的 喜 
Ts 次 。 本 案例 的 金属 质感 的 狗 标 ， 体 现 出 大 气 和 简洁 ， 亮 点 在 于 旋转 拉丝 金 
CS4 CS5 CS6 CC 属 的 视觉 特效 。 


本 例 制 作 的 是 金属 质感 旋钮 。 首 先 绘制 一 个 正 圆 ， 利 用 渐变 登 加 让 其 具有 金属 色 洋 ， 以 
这 个 正 圆 做 铺 捍 ， 继 续 绘 制 态 一 个 稍 小 的 正 圆 ， 依 有 旧 借助 渐变 登 加 让 其 具有 旋转 拉丝 的 金属 
效果 ， 最 后 绘制 上 图 标 每 其 他 细 市 。 


Ym 


〇 1 打开 文件 执行 “文件 > 打 
开 ” 命 令 ， 在 弹出 的 “打开 ” 
对 话 框 中 选择 素材 文件 ， 之 后 
单 击 “打开 ”按钮 ， 如 图 贺 
四 所 示 。 


中 | 大 几 背 半 得 
| 


和 国 曾 


2 绘制 椭圆 单 击 工具 栏 中 的 

“椭圆 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 
设置 填充 为 白色 ， 绘 制 椭圆， 
如 图 四 四 所 示 。 
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0 〇 3 添加 渐变 到 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 渐 变 准 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 对 加 效果 ， 如 图 
国 所 示 。 


04 添加 投影 单 击 “图 层 ” 而 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 
“投影 ”选项 ， 设 置 参数 ， 汪 
加 投影 效果 ， 如 图 贺 加 所 示 。 


〇 5 绘制 顶 圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 
设置 填充 为 白色 ,绘制 椭圆 ， 
如 图 四 四 所 示 。 


0 〇 6 添加 描 边 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 下 拉 菜单 中 选择 
“ 描 边 ”选项 ， 设 置 参数 ， 添 
加 描 边 效果 ， 如 图 国 因 所 示 。 


(OO / 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 莱 单 中 选 
择 “ 渐 变 登 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 车 加 效果 ， 如 图 
图 因 所 示 。 


变价 加 


渐变 


汤 合 模式 (0) : 
不 透明 度 (F) : 


样式 (L) : 


R: 147 辑 R: 43 R: 147 
Gr Gl 
B: 194 


投影 


温 合 模式 (6) : 
不 迁 明 度 人 0) : 


消 度 (4) : 


不 离 站) : = 
扩展 {F) : 
去 小 {5) : 


大 小 合 ) - 要 


己 置 (P) 


误 癌 杷 式 人 B) 
趟 迁 明 麻 避 D) 


填充 类型 IF 


源 合 模式 (0) : 
不 透明 度 (F) 
海 变 


样式 (L) 
高 度 (N) 


缩放 (S) 


回 


正常 ” 仿 色 
此 100 % 
LT Vs 
:高 度 Y ”IM 与 图 层 对 齐 (I) 
和 ao 主 
上 a 150 % 
’ 图 
门 入 站 
Re 242R: 172R! 37 R: 172 R: 242 R， 2 R: 7 R: 172 R: 242 
G: 249G: 178 G: 41 G: 178 G: 249G: 178 G: 41 G: 178 G: 2 
B: 249B: 188 B: 54 B: 188 B: 249B: 188 B: 54 B: 188 B: 13 
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线性 Y ”|v 与 图 屋 对 齐 (1) 


王 片 到 -i 
yp 
(50 一 库 辐 全 用 全 局 光 (6) 
= 15 颂 素 
25 。 俐 素 


c 加 人 -四 周 


习 ， 


1 瞎 素 


: 外 部 = 

= | 正常 下 

:Eee il00 时 

洲 变 = 
wax Lr | a0 
加 加 
G255 G: 62 6: 9 G: 255 

Ue: 2 ee: 7 a B: 255 加 
痊 放 人 C) - 100 号 


0 
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0 〇 8 导入 素材 执行 “文件 > 打 
开 ” 命 令 ， 在 弹出 的 “打开 ” 
对 话 框 中 选择 素材 文件 ， 单 击 
“打开 ”按钮 。 之 后 将 其 拖 搜 
至 场景 文件 中 ， 移 动 到 合适 位 
置 , 设置 图 层 的 混合 模式 为 “ 颜 
色 加 深 ”， 如 图 困 因 所 示 . 


OO9 绘制 三 角形 单 击 工具 栏 中 
人 
2 
A ea GA WR CR: 

PY, CE es ts ed Ea] 
1 oy 
角形 ， 如 图 国 国 所 示 。 


通 址 
| 只 关 型 | 国力 工 总 是 日 
| 正常 # | 让 透明 度 : [100%| > 


鳃 定 : sf 由 本 填充 :|1008| > 


0 绘制 椭圆 单 击 工具 栏 中 的 
“椭圆 工具 ” 按 包 ,在 选项 栏 
3a de I UA A SR, 
Ww (Ry 0: 
79，B: 95) ， 绘 制 椭圆 ， 如 图 
轩 所 未 。 


HE || ~ 


| 100%| = 


1 1 导入 素材 执行 “文件 > 打 
Ba ea 
对 话 框 中 选择 素材 文件 ， 单 击 
“打开 ”按钮 。 之 后 将 其 拖 搜 
全 场景 文件 中 ， 移 动 到 合适 位 
曾 ， 如 图 团 国 所 示 。 
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@ 光盘 路 径 
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K [SAVAVAOINO FX = 


当下 载 一 个 比较 大 的 文件 时 ， 可 能 要 等 一 会 儿 才 能 下 载 完成 ， 下 载 进 

度 可 以 提示 用 户 当前 已 经 下 载 了 多 少 ， 预 计 多 久 可 以 下 载 完成 等 信息 。 当 

ess 下载 进 度 较 慢 时 人 们 会 很 容易 产生 焦虑 感 ， 这 时 一 个 优美 并 有 创意 的 下 载 
进度 按钮 会 让 人 觉得 等 待 不 是 那么 的 漫长 。 


pF \ 
入 IA 
| 人 
是 SS 7 
p> 
yp 
> > py py 
FP EF A A \ py pp 
A F 4 
> | A | A 
二 上 | | | a A | 
四 大 2 
| 
| 
| 本 局 | 
,WW / 
| A 加 | 


Level 


本 例 是 一 个 届 平 化 的 下 载 进 度 按 钮 设计 。 设 计 师 首先 使 用 深浅 不 一 的 灰色 配合 图 层 样式 制作 
出 立体 效率 ， 再 通过 渐变 登 加 绘制 出 渐变 的 加 载 圆 环 ， 采 用 的 绿色 加 载 圆 环 有 力 地 缓解 了 人 们 的 
视觉 疫 和 大， 降低 了 焦躁 感 。 最 后 绘制 中 间 的 播放 图 标 ， 使 得 整个 按钮 更 有 层次 感 和 趣味 感 。 


0 〇 1 新 建文 件 执行 “文件 > 
新 建 ” 命 令 ， 或 按 下 快捷 键 
Om > en ef hy I RE 
对 话 框 中 新 建 宽 度 和 高 度 分 别 
为 800 X600 像素 的 文档 ， 完 成 
后 单 击 “确定 ”按钮 结束 操作 ， 
如 图 团 加 押 示 。 


(OZ 填充 颜色 设置 前 景色 为 灰 
全 RE 
da FA ID @ 8 > 2 Ce A es 
景 填充 闫 色 ， 如 图 辆 贺 所 示 。 


Photoshop APP Ul 设计 从 入 门 到 精通 


〇 3 绘制 正 圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
7 Dl Fh ss ER A EN 

设置 填充 为 深蓝 色 (R:56，6: 

全 中 
到 “椭圆 1” 图 层 ， 如 图 园 四 
所 示 。 


O4 添加 内 阴影 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “内 阴影 ”选项 ， 
设置 参数 ， 添 加 内 阴影 效果 ， 
如 图 国 国 所 示 。 


05 添加 投影 单 击 “图 层 ”而 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 “图 层 样式” 对 
话 框 中 选择 “投影 ”选项 ， 设 
置 参数 ， 添 加 投影 效果 ， 如 图 
国 四 所 示 。 


O6 绘制 国 环 单 击 工 具 栏 中 的 

“椭圆 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 
绘制 正 圆 。 之 后 再 次 单 击 “ 椭 
圆 工 具 ” 按 钮 ， 在 选项 栏 中 选 
择 “ 减 去 顶层 形状 ”选项 ， 绘 
制 同心 圆 , 得 到 “椭圆 2” 图 层 ， 
设置 图 层 的 填充 为 0， 如 图 国 
因 所 示 。 


(OO / 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 “图 层 样式 ” 

对 话 框 中 选择 “渐变 芝 加 ” 选 项 ， 
设置 参数 ,添加 渐变 芝 加 效 果 ， 

如 园 所 未 。 


内 阴影 
混合 模式 (B) :正片 秋风 ~ 国 国 
不 透明 度 {0) : gs FP 


襄 度 () : | 4 | 30 度 贺 使 用 全 局 光 避 ) 


距 高 (D) : ys 19 像素 
阻 灾 {r) : < 0 ks 
大 小 (5) : aps 12 上 素 

投影 

源 研 模式 {8) -小 色 将 

不 进 明 麻 (o) : eys 1 
征 度 (A): ( 55” 度 回合 用 全 局 光 (6) 
距离 (D) : < T | 候 素 
扩展 (R): 所 0 
大 小 (5) : | 三 1 僚 素 


渐变 霍 加 
渐变 
汤 合 模式 (0) : 
不 透明 度 (FP) : 
渐变 : 
样式 (L) : 


正常 v 回信 和 色 
PN 100 % 


可 


鲍 度 Y 加 与 图 层 对 齐 (IT) 
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0 〇 8 绘制 正 圆 单 击 工具 栏 中 的 
“ 顶 圆 工具 ”按钮 ， 在 选项 栏 
Hn de A NA WR , 
设置 填充 为 绿色 (CR:101，6: 

pO BA st le 
到 “椭圆 3” 图 层 ， 如 图 国 
所 示 。 


0 〇 9 添加 描 边 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “ 描 边 ”选项 ， 
设置 参数 ， 添 加 描 边 ， 如 图 国 
国 所 示 . 


10 复制 图 层 单 击 “ 椭 圆 2” 
图 层 ， 按 下 《Ctrl1+J> 组 合 键 复 
制图 层 ， 将 “椭圆 2 拷贝 ”图 
层 移 动 到 “椭圆 3” 图 层 上 方 ， 

如 图 国 园 所 示 。 


人 1 复制 图 层 单 击 “ 椭 圆 2” 
图 层 ， 按 下 《Ctr1+J》 组 合 键 复 
吊 图 睫 | 2 2 
图 层 移动 到 “椭圆 2 拷贝 ”图 
| 师 员 川 较 芍 时 页 图 属 届 这 莘 
“清除 图 层 样式 ”命令 ， 如 图 
园 所 未 。 


2 添加 投影 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 “图 层 样式 ”对 
话 框 中 选择 “投影 ”选项 ， 设 
置 参数 ， 添 加 投影 效果 ， 如 图 
因 所 示 。 


扫 怀 
些 构 
驻 千 模式 亿 ) : 怨 色 | 
不 迁 明 度 人 0) : 10 时 
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撞 迪 
化 构 
大 小 全 :ee 1 | 傣 末 
位 置信 ): 外 部 
温 各 模式 司 ) : 正常 ™ 
不 迁 明 度 {0) : 100 | 哟 


填充 类 型 人 FE) : 二 色 


R: 20 


部 所 : 国明 : 78 
B: 41 


锁定 : 图 上 中 面 填 这 : 
赂 可 | ee 

局 虑 站 棋 回 2 接见 六 3 
十 党 果 i 


| 正常 = | 不 迁 明 度 : [100%| = | 
锁定 : 图 sf 吊 面 。 荣 充 : [os |=| 


© | mez #n? EF 


第 度 (A): 30” 座 回 侠 用 全 局 光 (c) 


臣 离 避 : 皮 1 乙 素 
扩展 (R) : 全 0 
天 小 司 ) : 本 1 公 素 
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1 3 绘制 正 图 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
Pha 4 mA 
设置 填充 为 绿色 (CR:101，6: 

Dp.0 Ob lA ist ha lb 0 
到 “椭圆 4” 图 层 ， 如 图 园 
所 示 。 


1 4 绘制 同心 圆 单 击 工具 栏 中 
的 “椭圆 工具 ”按钮 ， 在 选项 
栏 中 选择 “ 减 去 顶层 形状 ” 选 
项 ， 绘 制 同心 圆 ， 如 图 团 
所 示 。 


15 添加 渐变 要 加 单 击 “ 图 层 ” 
面 杷 | 由 7 写本 
按钮 ， 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “渐变 徐 加 ” 选 
项 ， 设 置 参 数 ， 添 加 渐变 秋 加 
效果 ， 如 图 园 国 所 示 。 


16 添加 投影 单 击 “图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 “图 层 样式 ”对 
话 框 中 选择 “投影 ”选项 ， 设 
置 参数 ， 添 加 投影 效果 ， 如 图 
七 所 未 。 


1 7 添加 文字 单 击 工具 栏 中 
By fa a en 4 
之 后 在 选项 栏 中 设置 字体 为 
Helwetrcaleue lb IS tw | 
PT ey oR CRE 
D880 or IB 2 | a 
相应 文字 ， 如 图 图 图 所 示 。 


渐变 和 登 加 

渐变 

混合 模式 (0) : 正常 v | 辐 仿 色 
不 透明 度 (P) : Fa 59 % 

We: 回 反 向 外 
样式 (L) : ”线性 = 图 与 图 层 对 齐 (IT) 
龟 度 (N): [4 | 90 度 
缩放 (5S) : — Dy 150 % 

回 二 

四 4 2 
B: 86 B: 129 

投 蓄 
驻 各 模式 人 1: 正片 秋 底 [= | 
不 迁 明 度 {(0) : 时 5 10 风 

印度 全 :| 上 ) 56 ” 度 回 代用 全 局 光 {6) 
暂 敲 (0D) : eps 20 ” 瞎 素 
扩展 1K) : | 各 旬 
大 小 (8) re 20 人 履 素 


F nl 
a 
图 层 一 RN | 


= | 路 径 全 
| 户 关 型 3| 回 才 了 工 写 田 目 
[ 王 常 。” :|] 不 迁 明 度 : 


锁定 - 加 中国 填充 : 


[| = 
加 44 
= [了 < 


@@ | 也 本 加 2 拷贝 2 & 国 


种， 藻 呆 


| 器 类 
| 正常 | 不 透明 度 : [100%| > | 
镇 定 : 四 A 中 看 填充 : [100%| ~ | 


于 一 


[pa OT [号 | 画 四 
| 正常 * | 看透 明度: [100%| = | 
锁定 : 轩 上 上 宣 交 填充 : 


-一 
图 E | 通 | 


起 


35% Compnlete... 


S50% O00OMPLETER.. 
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剖 至 你 透 的 灯 单 界面 按钮 


I 半 透 明 的 菜单 界面 按钮 给 人 以 晶莹 别 透 、 时 尚 前 卫 的 感觉 ， 特 别 是 经 
SX 过 细致 处 理 的 小 按钮 和 小 图 标 更 是 “点 上 晴 ” 的 关键 。 下 面 就 来 学 习 一 下 这 


MW/s]esjle)a 


CS4 CS5 CS6 CC 种 主流 的 半 透 明 沫 单 界 面 按钮 制作 。 


本 例 制作 的 是 具有 半 透 明 效 果 的 菜单 界面 按钮 。 设 计 师 首先 采用 椭圆 工具 的 加 减 运 算 
绘画 出 圆 环 造型 ， 之 后 通过 调整 2 02 a 
度 ， 接 着 绘制 出 有 立体 感 的 中 间 圆 ， 最 后 绘制 分 割 线 以 及 添加 相应 的 小 图 标 。 


O1 打开 文件 执行 “文件 > 打 
ra hy ep ph 
对 话 框 中 选择 素材 文件 ， 单 击 
“打开 ”按钮 ， 如 图 贺 四 所 示 。 


OZ2 绘制 椭圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 

设置 填充 为 白色 ， 绘 制 椭圆 。 

再 次 单 击 工 具 栏 中 的 “椭圆 工 
具 ” 按 钮 ， 在 选项 栏 中 选择 “ 减 
去 顶层 形状 ”选项 ， 绘 制 椭圆 ， 
充 芝 图 层 的 填充 为 40%， 如 图 
四 所 示 。 


-了 


(3 添加 斜面 和 浮雕 单 击 “图 
层 ” 面 板 下 方 的 “添加 图 层 样 
式 ” 按 钮 ， 在 弹出 的 下 拉 菜 
中 选择 “和 斜面 和 浮雕 ”选项 ， 
设置 参数 ， 添 加 斜面 和 浮雕 效 
果 ， 如 图 辆 国 所 示 。 


O4 添加 内 阴影 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 内 阴影 ”选项 ， 设 置 参数 ， 
添加 内 阴影 效果 ， 如 图 加 加 
所 示 。 


O5D 添加 内 发 光 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 内 发 光 ” 选 项 ， 设 置 参数 ， 
添加 内 发 光 效 果 ， 如 图 国 
所 示 。 


(6 添加 光泽 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 近 
钮 ， 在 弹出 的 下 拉 菜单 中 选择 
“光泽 ”选项 ， 设 置 参 数 ， 湛 
加 光泽 效果 ， 如 图 国 加 所 示 ， 


〇 了 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 渐 变 登 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 闪 加 效果 ， 如 图 
加 所 示 。 


Photoshop APP Ul 设计 从 入 门 到 精通 
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芭 天 乔 泽 对 
样式 (T) : ”内 斜 画 下 
方法 (8) : ” 平 尘 下 
深度 (D) : 上 30 = 
方向 :@ 上 下 
大 小 (2) : ys 妇 售 吉 
软化 (F) 0 丛 素 
阴影 
第 度 (N) : 120 | 度 
卫 | 网 侠 用 全 局 光 (G) 
高 度 : \ 30 ” 度 
光泽 等 高 线 - - 问 江陵 锯 交 人) 
言 光 模 式 (H) : 小 色 
不 透明 度 (0) : eg 75  % 
卫 影 杠 式 (8) : 正片 释 底 ~ 国 四 和 100 
不 透明 度 (C) : ey 75 2 因 
ey 05 
内 阴影 
小 构 
汤 半 模式 {B) :- ” 替 加 
不 透明 度 (0) :; cys 国 % 
第 度 (A) : [和 | 120” 座 辆 使用 全 局 光 ({G) 
距离 (D) :AS 1 | 像素 
限 灾 tc) : 所 人 
大 小 全 ) : 本 1 履 素 
兴 发 光 
仁和 构 
混合 模式 (B) : 正常 
不 透明 度 (0) : ey 50 | 多 
订 色 (8N): CS 0 多 
S|[ Ol | 
国志 
方法 (@) : 深 和 vv 
源 : 回 后 中 人 E) ” 轿 边 缚 (G) 
阻塞 (C) : Am 0 2 
大 小 (S) PR 3 像素 [四 
光泽 
汤 间 模式 {6) : 正常 ~ 国 国 8 坟 
不 各 明度 (0): cy 117% 
角度 (MN): [| 后 应 
看 离 (D) : yg 一 100 ”像素 
大 小 (9): ee 24 人 履 来 
淘 变 
福音 愤 式 (0 : ” 妻 加 ”| 加 | 仿 包 
不 透明 度 p) ， 呈 1 5 
“x 7| Da 
样式 代 ) : 些 性 ”| 车 | 与 图 层 对 齐 1 
儿 度 (NM): [下 50 度 
缩放 (5) : y= 00 
设置 为 默读 位 芷 位 为 就 读 位 


0 〇 8 添加 外 发 光 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 内 发 光 ” 选 项 ， 设 置 参 数 ， 
添加 外 发 光 效果 ， 如 图 固 
所 示 。 


〇 9 添加 投影 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 
“投影 ”选项 ， 设 置 参数 ， 添 
加 投影 效果 ， 如 图 国 国 所 示 ，。 


10 绘制 酉 圆 利用 相似 方法 给 
制 椭 圆 ， 并 且 复 制 “ 椭 圆 1” 
图 层 的 图 层 样 式 ， 如 图 因 
所 示 。 


1 1 绘制 憩 形 单 击 工具 栏 中 的 
“和 矩形 工具 ”按钮 ， 在 选项 栏 
Ft no dF OL a A Ro 
设 管 填充 为 灰色 (R: 81，6: 
Bs BG 0 Su 
设置 图 层 的 填充 为 60%， 如 图 
国 所 示 。 


12 导入 素材 执行 “文件 > 打 
开 ” 命 令 ， 在 弹出 的 “打开 ， 
对 话 框 中 选择 素材 文件 ， 单 击 
“打开 ”按钮 。 之 后 将 其 拖 搜 
至 场景 文件 中 ， 移 动 到 合适 位 
置 ， 完 成 案例 设计 ， 如 图 国 
团 所 示 。 


外 发 光 


竺 构 

混合 模式 (E) : 

不 透明 度 (0) : 
杂 色 (N) : 


国 素 


和 车 构 


温 澡 模式 ( 卫 ) : 
不 透明 度 (0) : 


龟 度 售 ) : 


距离 () : 
扩展 (FR): 
大 小 (8) : 


正常 一 

ys ny 15 % 

Am 0 % 

条 和 vv 

Am 0 % 

PP 5 僚 素 
正片 香 底 ~ 国 国 

30 贤 


| 
局 
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| 120 度 国 使 用 全 局 光 (G) 


如 驳 
2 民政 
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地 闭 画 和 泽 驻 
局 内 阴影 
各， 内 深交 加 了 
cc 丰 回首 四 恒 奋 了 绚 


筑 定 : 加 四 境 序 避 sos | = | 


| 
各 矩形 1 一 


攻 : 巧 


® [He 阿 - 
局 藻 采 


二 诗 画 和 泽 对 时 
22 


Photoshop APP Ul 设计 从 入 门 到 精通 


@ 光盘 路 径 
Chapter 10/Media 


Level 一 一 一 众所周知 ， 一 个 界面 的 成 败 决定 于 细节 之 处 ， 其 至 一 个 精致 的 按钮 或 
A 导航 都 可 以 提高 界面 的 视觉 效果 。 按 钮 是 界面 最 重要 的 组 成 元 素 之 一 ， 也 


=TKS [Tell 


CS4 CS5 CS6 CC 是 用 户 和 界面 进行 交互 的 重要 桥 移 ， 其 设计 要 保持 风格 的 一 致 性 。 


本 例 是 手机 界面 整体 按钮 的 设计 制作 。 设 计 师 保持 了 颜色 与 风格 的 一 致 性 原则 ， 设 计 的 
界面 侧 清 、 大 气 、 有 科技 感 ， 颜 色 拱 配 目 由 发 挥 ， 有 具备 很 好 的 视 沉 效果， 同时 对 界面 上 的 按 
钮 设计 采用 简易 的 风格 。 


Q1 新 建文 件 执行 “文件 > 
新 建 ”命令 ， 或 按 下 快捷 键 
OU > ey 
对 话 框 中 新 建 宽 度 和 高 度 分 别 
为 400X300 像素 的 文档 ， 完 成 
后 单 击 “确定 ”按钮 结束 操作 ， 
如 图 辆 加 所 示 。 


OO2 绘制 背景 设置 前 景色 为 


人 和 


64) ， 按 下 《AlLt+Deletey> 组合 EC 
键 为 背景 填充 前 景色 ， 如 图 国 WE 图 中 是 和: [50% | "| 


| 
四 上 所 示 。 局 区 于 椭 回 1 


e 畏 = 


SG 大 .加 性. 向 国 
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〇 3 绘制 贺 角 矩形 单 击 工具 栏 
EE a SS EL ez eh 

在 选项 栏 中 选择 工具 的 模式 为 
“形状 ”， 设 置 填充 为 深蓝 色 
(aE A NG eB Ga 
径 为 100 像素 ,绘制 贺 角 和 矩形 ， 
a aa ea 
图 加 因 所 示 。 


〇 4 添加 内 阴影 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 内 阴影 ”选项 ， 设 置 参数 ， 
添加 内 阴影 效果 ， 如 图 加 加 
所 示 。 


(OOD 添加 渐变 要 加 单 击 “ 图 层 ” 
Wp A oh sl 和 二 到 
按钮 ， 在 弹出 的 下 拉 荣 单 中 选 
a a 
数 ， 添 加 渐变 闭 加 效果 ， 如 图 
四 四 所 未 。 


(OO 绘制 贺 角 和 拢 形 单 击 工 具 栏 
ph A RS WL he eH 
在 选项 栏 中 选择 工具 的 模式 为 
“形状 中, 设置 填充 为 黄色 
CR BO Ga mo a samy 
半径 为 100 像素 ， 绘 制 圆 角 算 
形 ， 得 到 “ 圆 角 矩形 2” 图 层 ， 
如 图 国 因 所 示 。 


OO / 添加 内 阴影 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 按 
钮 ,在 弹出 的 下 拉 菜单 中 选择 “内 
阴影 ”选项 ， 设 置 参 数 ， 添 加 内 
阴影 效果 ， 如 图 图 四 所 示 。 


内 亲 影 
结构 
谍 半 模式 全 ) : ”和 雪 加 
下 适 明 度 (0) : 本 50 
锡 度 他) -| | -90 ” 度 回 使 用 全 局 光 (G) 
不 离 {D) : es 尾 素 
阻 训 {C)} 本 ES | 如 岛 
大 小 {5) : Ce | 恬 素 
渐变 霍 加 
汤 合 模式 (0) :” 霍 加 ” 仿 气 
不 透明 度 (P) : PD 100 |% 
样式 (L) : 线性 v | 以 | 与 图 层 对 齐 (I) 
第 度 (N) : | | -390 度 
缩放 (S) : 100 多 
加 
国 R: 76 R: 102 转 R; 153 园 R: 178 国 ”RR: 204 
G76 G: 102 人 G: 204 
B76 B: 102 B: 153 B: 178 B: 204 


内 困 蓄 
些 构 


注音 异 式 (B) : 
下 和 送 明度 (0) : 
帝 度 (4): 
愿 离 (0D) : 
限 训 (Cc) : 
大 小 人) : 


登 部 


- 


60 


与 
心 


( 9 | 30 度 辐 局 用 全 局 光 (6) 


乙 素 
已 素 


| 
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图 层 | 通道 | 路 径 | 二 


[P| 国 必 TT 口 明 四 


[ 下 车 :| 未 过 吉庆 :ioox| =] 


饥 定 : 加 of 中 而。 寺 充 : [ioog -| 


地 | 回 帝 证 式 1 


| 
。 四 = 


3 产 . 回 多 向 国 


[ 且 
EB 
加 回 癌 讶 形 2 EE 
L J 
可 | 了 ”加 帝 省 形 1 
SS 产 . 器 ©. "| 


Photoshop APP UI 设计 从 入 门 到 精通 


0 〇 8 添加 内 发 光 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 内 发 光 ” 选 项 ， 设 置 参 数 ， 
添加 内 发 光 效 果 ， 如 图 固 
所 示 。 


(OO9 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 渐 变 登 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 三 加 效果 ， 如 图 
图 所 未 。 


10 绘制 椭圆 单 击 工 具 栏 中 的 
1 a ,ee wi hss 
2 4 tr A Eb 
设 萤 填充 为 次 色 (R:239, 0G: 

2 590 B20 | tl 
到 “椭圆 1” 图 层 ， 如 图 因 
所 示 。 


人 人 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 多 
选 “ 渐 变 倒 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 全 加 效果 ， 如 图 
园 所 示 。 


2 添加 投影 单 击 “ 图 层 ” 面 
板 下 方 的 "添加 图 层 样式 ”按钮 
在 弹出 的 下 拉 菜单 中 选择 “ 投 
影 ” 选项， 设置 参数 ， 添 加 投 
影 效 果 ， 如 图 图 团 所 示 。 


内 发 光 

涯 构 

泥 合 模式 (B) : 正常 ” 

不 透明 度 (0) : EDN 100 0 
杂 色 (N) :Jem % 


5 国 O Meee | 


R: 102 
图 素 6G._51 
BE 
方法 {@): 和 柔和 v 
源 : 回 后 中 (E) ” @ 边 绽 (6) 
限 案 (C) : CO  % 
大 小 (5) ee 12 像素 
渐变 夫 加 
革 变 
泥 合 模式 (0) : ” 霍 加 - 仿 色 
不 透明 度 (F) - 2 100 zz 
样式 (L) : 线性 v IY| 与 图 层 对 齐 (I) 


高 度 (N) : 站 | 30 度 


缩放 (S) : zs 100 多 
加 
国 R，102 图 R. 128 R 178 国 
G: 102 G: 128 G: 178 
B: 102 B: 128 B: 178 


锁定 : 国 sf 中 看 寺 充 : [i900] = | 
| | 
二 | 品 椭 回 1 
LJ 
党 | 癌 回 帝 拒 形 2 
时 东 果 


= Hr FE 


SS .加 心 . 四 上 国 


渐变 重 加 
渐变 
混合 模式 (0) : ” 霍 加 仿 和 名 
不 透明 度 (FP) EE 如 100 二 
Y# 交 :IE | 口 sao 
样式 (L) : 线性 了 | 与 图 层 对 齐 (I) 
角度 (N) : 90 度 
缩放 (5S) : 一 150 和 % 
加 
加 R: 102 R255 白 
G: 102 G: 255 
B: 102 B259 
投 晤 
汤 合 模式 人 B) : ”正片 释 底 ~ 加 是 
不 透明 度 亿 ) : 2 


条 度 (A): (4 50 ” 讼 回 使 用 全 局 光 (G) 


距离 人 p) gs 5 亿 袁 
扩展 {FE): 二 说 而 
大小 (5) : CR | 下 傍 素 


1 3 绘制 椭圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
nia 3 WN yh ey 0 ob» 
议 管 填充 为 灰色 CR:229，6: 
Doo) | [Bu D200 2 he 

到 “椭圆 2” 图 层 ， i 
Dr 


1 4 添加 渐变 要 加 单 击 “图 层 ” 
a a a WN 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
0 ea 0 | 章 瘟 ) 次; 
数 ， 添 加 渐变 时 加 效果 ， 如 图 
图 所 未 。 


1 5 绘制 矩形 单 击 工具 栏 中 的 
“和 抢 形 工具 ”按钮 ， 在 选项 栏 
ia et a A Th 
设置 填充 为 红色 (R:217，6: 

Pe Ss 
到 “和 矩形 1” 图 层 ， 如 图 园 
所 示 。 

1 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 渐 变 营 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 膨 加 效果 ， 如 图 
轧 所 未 。 


1 7 绘制 形状 单 击 工 具 栏 中 的 
po a pi 
Fa de DL rh A Tb 
设 告 圳 人 允 内 次 师 包 |(R;45,10: 
0a Ee GA DI st SR 
到 “形状 1” 图 层 ， 如 图 图 
所 示 。 


eid i i 


i 二 


党 也 椭圆 2 
L J 

党 | 癌 椭 回 1 
晤 ， 东 时 


wr dE Br 


SG 六. 加 心态 国 


渐变 二 加 
混合 模式 (0) : ” 霍 加 v 仿 色 
不 透明 度 (F) : Dy 100 % 


六 :IT 日 cao 


样式 {L) : 线性 v | | 与 图 导 对 齐 (1) 
角度 (N): | 。 | -90 度 


编 放 ( 3S ) > ee 100 Ea 


渐变 和 堆 加 
源 合 模式 (0) :。 县 -| 同 仿 色 
不 透明 度 (P) :ey 100 % 


六 Dia 


样式 人 L) : 线性 vv | 以 | 与 图 层 对 齐 (I) 


高 度 (N) = | 和 | 90 度 


| 正常 = | 下 过 明度 :| loog| ~ | 
锁定 : 团 of 中 站 。 填充: [i00%| | 
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1 8 添加 内 发 光 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样 式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 内 发 光 ” 选 项 ， 设 置 参数 ， 
添加 内 发 光 效 果 ， 如 图 国 
所 示 。 


19 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 渐 变 医 加” 选项， 设置 参 
数 ， 添 加 渐变 琶 加 效果 ， 如 图 
图 所 示 。 


人 20 添加 投影 单 击 “图 层 ” 面 
RN 7 I WN 
钮 ， 在 弹出 的 下 拉 荣 单 中 选择 
a 
加 投影 效果 ， 如 图 图 四 所 示 。 


人 之] 绘制 贺 角 矩形 单 击 工具 栏 
EL 

在 选项 栏 中 选择 工具 的 模式 为 
a 
CeO Cs iA Ee YN 

半径 为 10 像 素 , 绘制 圆 角 和 矩形， 
GE a 
图 团 轨 所 示 。 


人 人 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 渐 变 登 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 琶 加 效果 ， 如 图 
图 所 示 。 


Photoshop APP UI 设计 从 入 门 到 精通 


内 发 光 

结构 

混合 模式 (B) : ”正片 登 底 ~ 

不 透明 度 (0) : : 5 i% 
杂 色 (N) : /= 0 
9 国 O mR"| 

回 素 


方法 (Q): 系 和 v 


深 : @ 后 中 (E) 图 边缘 (9) 
阻塞 (C) : 6‘ 0 % 
大 小 (5): gs 5 “像素 
渐变 二 加 
渐变 
汤 合 模式 (0) : ”得 加 v 仿 色 
不 透明 度 {P) : PN 100 级 
-ET ss 
样式 ({L) : 线性 vv | 以 | 与 图 层 对 齐 (I) 
一 度 (N) 四 | -90 度 
妨 放 (5S) 一 100 多 
男 
国 R: 76 : 
G: 76 
B: 76 
误 台 弄 式 个) : 霍 加 下 
不 透明 度 {0} : 3 50 | 蜀 
第 度 (A): [4 | 56 ” 度 回 使 用 全 局 光 (c) 
奋 离 !D) : 人 1 发 素 
展 (R): A ss 7 欧 
大 小 合 ) : es 怪 素 


渐变 登 加 
渐变 


源 合 模式 (0) : 
不 透明 度 (FP) : 


渐变 : 


样式 {L): 


EE 
锁定 : 加 2 站 四 填 苑 汪 1oox| ~ 


BE 深 加 高 泄 式 3 
LL 


i 形 妆 1 
本 
十 落果 


SS 床 . 加 ©. 国 ” 辐 


替 加 Db 仿 色 
ZY 100 有 % 
[| 中 反 向 (R) 
熏 考 vv |v 与 图 屋 对 齐 (1) 
30 度 
100 % 
加 
R: 153 重 


G: 153 
B: 153 
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之 3 添加 图 案 到 加 单 击 “图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 图 案 舍 加 ”选项 ， 设 置 参 
数 ， 添 加 图 案 熙 加 效果 ， 如 图 
图 所 示 。 


4 绘制 贺 角 矩形 单 击 工具 栏 
Fey a AS EL eh 
在 选项 栏 中 选择 工具 的 模式 为 
“形状 ”， 设 置 填 充 为 深 灰 色 
人 
径 为 10 像 系 ,绘制 圆 角 和 给 形 ， 
a a ea 
图 所 示 。 


人 FD 添加 投影 单 击 “图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 下 拉 菜单 中 选择 
“投影 ”选项 ， 设 置 参数 ， 添 
加 投影 效果 ， 如 图 图 国 所 示 。 


2 绘制 形状 单 击 工具 栏 中 的 
EE ho a Wi 
oe 
设置 填充 为 蓝 色 (R:29，6G: 

78, BW9 D2 和 形 舌 | 入 
到 “形状 2” 图 层 ， 如 图 团 
所 示 。 


2 有 绘制 形状 单 击 工具 栏 中 的 
“钢笔 工具 ”按钮 ， 在 选项 栏 
Hi zo ee I I ti A 
设 管 填充 为 灰色 (CR:229，6: 

B29 BS 20 | i 
到 “形状 3” 图 层 ， 如 图 国 
所 示 。 
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图 索 登 加 

轩 夫 

泥 合 模式 (BE) : ” 霍 加 

不 透明 度 (Y) : 7 30 2 


a 淮 . 


c 泪 塞 三 5 
| ] 
图 


| 正常 |] 不 各 明度 : [100%| - | 
饶 定 : 回 of 中 咎 。 荣 充 : [1008| | 


“en 
贺 遍 矩形 4 
Ei 


温 全 模式 (8B) : 正常 ™ 
下 适 明 度 {0}: 20 驳 


弟 度 (8) : ( | ) 30 


讼 加 | 使 用 全 局 光合) 


下 高 D) : /一 了 像素 
扩 悦 (R): 0 
大 小 加 :Ce 0 | 像素 


| 正常 * | 不 各 明度 : [100%] ~ ] 
迎 证 ; 回 of 中 咎 。 荣 充 : [100%| | 


== 

弄 状 2 
a 

园 癌 证 芝 4 二 
es 
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Photoshop APP UI 设计 从 入 门 到 精通 


人 8 绘制 加 角 矩 形 单 击 工具 栏 
和 
在 选项 柱 中 选择 工具 的 模式 为 
0 
制 加 角 算 形 , 得 到 “ 圆 角 和 矩形 5” 
图 层 ， 之 后 设置 图 层 的 填充 为 
0， 如 图 国 国 万 示 。 


2g9 添加 内 阴影 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样 式 ” 
按钮 ， 在 弹出 的 下 拉 荣 单 中 选 
择 “ 内 阴影 ”选项 ， 设 置 参数 ， 
添加 内 阴影 效果 ， 如 图 园 
所 示 。 


也 添加 内 发 光 单 击 “图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 内 发 光 ” 选 项 ， 设 置 参数 ， 
添加 内 发 光 效果 ， 如 图 国 团 
所 示 。 


孔 添加 渐变 到 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 渐 变 释 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 全 加 效果 ， 如 图 
国 所 示 ，。 


了 22 绘制 形状 单 击 工具 栏 中 的 
sl 
hd A NR, 
设置 填充 为 红色 (R:217，6G: 
本 
到 “形状 4” 图 层 ， 如 图 国 加 
所 示 。 


锁定 : 回 of 中 古寺 充 : [0% | >] 


| | 网 
回 和 所 拭 稼 5 
EN 


弄 状 3 
LE 


3 术 回 上 关 太 同 


内 了 苇 且 
些 构 
福音 恒 式 他 1 : 正常 下 人 | 
不 迁 明 度 (0) : "50 允 


第 度 (A): [ 30” 座 回合 用 全 局 光 {6) 


下 高 站 : /一 像素 
阳 训 上: Je 
大 小 加 :你 去 


兴 发 光 
车 构 
混合 模式 ({B) : 正常 
不 透明 度 (0) : ey 5 
1 


杂 色 (N): 后 


方法 (Q@): 和 柔和 


源 : 后 中 人 E) 。” @ 边 综 {6) 
卫 训 (0) 0 二 
大 小 {(S i 僚 素 
渐变 和 登 加 
渐变 
混合 模式 (9) : ”去 加 性 仿 入 
不 透明 度 (F) : A 100 % 
“x | Das 
样式 (L) : 线性 Y ”| 导 与 图 层 对 齐 (I) 


Ez 
We 


| [ee E 
中 形状 壮 
EE 并 
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也 3 添加 斜面 和 浮雕 单 击 “图 
层 ” 面 板 下 方 的 “添加 图 层 样 
式 ” 按 钮 ， 在 弹出 的 下 拉 菜 : 
中 选择 “斜面 和 浮雕” 选项 ， 
设置 参数 ， 添 加 斜面 和 浮雕 效 
果 ， 如 图 国 国 所 示 。 


了 4 添加 内 阴影 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样 式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 内 阴影 ”选项 ， 设 置 参 数 ， 
添加 内 阴影 效果 ， 如 图 国 困 
所 示 。 


也 添加 投影 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 下 拉 菜单 中 选择 
“投影 ”选项 ， 设 置 参数 ， 添 
加 投影 效果 ， 如 图 国 四 所 示 。 


了 3 添加 文字 单 击 工具 栏 中 的 
“ 横 版 文字 工具 ”按钮 ， 在 选 
项 栏 中 设置 字体 为 SansSerif 
Reg wlan ll ee A Ou 
颜色 为 蓝 色 (R: 29，G: 178， 
B: 191) ， 输 入 相应 文字 ， 如 
图 园 因 所 示 。 


了 /添加 内 阴影 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “内 阴影 ”选项 ， 设 置 参 数 ， 
添加 内 阴影 效果 ， 如 图 因 
所 示 。 


计 画 和 尘 具 
拷 构 
样式 (T) : ”内 诸 画 v 
方法 (Q) : 平滑 下 
深度 (D) : S 150 多 
方向 : @ 上 下 
大 小 (Z) : 上 丛 素 
软化 (F): 人 0 丛 素 
襄 度 (N): -90 度 
使 用 全 局 光 (G) 
ee 30 | 度 
| ~ 浅 险 锯 涛 (1L) 
高 光 杷 式 {E) : 正常 - 
不 透明 度 (0) : 7 = 
隔 影 楼 式 (A) : 正常 下 
不 透明 度 (C) : LS 0 % 
内 证 影 
些 构 
汤 侣 模式 全 ) : 正常 
不 和 授 明度 (0) : 
帝 度 (4) : 
罩 敲 们 ) : 凸 
险 训 (Cc) : 


大 小 (8) : 一 一 一 一 一 


操 避 : 
此 构 


注 合 异 趟 人 Ba) : 正常 


不 透明 度 10) : 


贤 度 导 ] : 


距离 (D) : /一 


扩展 (R) : /一 


大 小 (5) : = 


内 阴影 

温 合 模式 全 ) : ”正片 秋 底 ~ 国 国 

不 透明 度 (0) 9 5 人 | 双 
条 座 (A): [| 50 ” 度 回合 用 全 局 光 (6) 
正高 {D) : 一 1 像素 
阳 害 (0): ye 0 5 
大 小 (9) :ee 1 像素 


Ry 100 |% 


( | 度 回 | 使 用 全 局 光 () 


2 乙 素 

如 驴 

1 尾 素 
,| ON 驴 


( ! | 30 ”| 度 回民 用 全 局 光 (6) 
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R: 128 
-Wl: 
Bell 


1 发 素 
如 驴 
0 履 素 


铁定 : 思 of 中 看 境况 : [1009] =] 


i Upload lL 


| 基本 引 | | 
迁 状 4 rr 
水 kr 


Photoshop APP UI 设计 从 入 门 到 精通 


了 38 添加 内 发 光 单 击 “ 图 层 ” ar 
面板 下 方 的 “添加 图 层 样 式 ” a Ey > 


按钮 ， 在 弹出 的 下 拉 菜 单 中 选 人 
择 “ 内 发 光 ” 选项， 设置 参数 ， 
、 Wh L 图 素 
添加 内 发 光 效果 ， 如 图 因 es 
所 未 。 源 : 同 后 中 (E) ” @ 边 绽 (6) 
阻塞 (C) -Am 0 % 
大 小 (S) 3 僚 索 


39 添加 投影 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 >， 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 汤 合 模式 {6) : 释 加 a 


时 人 Ed NK yd 不 渤 DY = 一 
[dt EE 2 | 不 透明 度 (0) : yg» 35 % 


加 投影 效果 ， 如 图 园 四 所 示 。 (1) Danesx0 
丰 离 于 一 == 1] 瞄 素 
扩展 (8): /= 0 名 
大 小 悟 ) :Am 0 瞎 素 


4 绘制 椭圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
设 管 填 充 为 深蓝 色 (CR:45，6: 
GA 
到 “椭圆 3” 图 层 ， 如 图 因 图 
所 示 。 


人 4 1 添加 内 阴影 单 击 “ 图 层 ” "a 
Ee i sb 温 全 模式 (8) : 垂 加 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 。 T3580. 一 


择 6 内 阴 影 2 选项 | 设置 参 数 | 癌 度 (4): ( ) -90 ” 度 加 使 用 全 局 光 () 
添加 内 阴影 效果 ， 如 i 
wll 大 小 (8) : /一 了 像素 


4 2 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 源 全 模式 (0) :。 县 加 > 同 仿 色 


| 不 透明 度 {P) : PN 100 多 
按 煞 ， 在 弹出 HI hy se EE 渐变 : [| | 反 向 (R) 
择 66 渐变 县 加 39》 选项 | 人 样式 (L): 线性 ”IY 与 图 层 对 齐 (I) 
角度 (N) : -90 | 度 


数 ， 添 加 渐变 达 加 效果 ， 如 图 wo 
国 国 上 所 示 。 a 


G: 76 : : 0 @ i G: 204 
B: 79 B: 102 B: 153  B: 178 B: 204 
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3 绘制 椭圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
中 迹 择 册 具 的 模 载 为 形状?”， 
设置 填充 为 深蓝 色 (R:45，6G: 
BO :NG 4 10 ao i 
到 “椭圆 4” 图 层 ， 如 图 
jy 


444 添加 内 发 光 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 内 发 光 ” 选 项 ， 设 置 参数 ， 
添加 内 发 光 效 果 ， 如 图 
所 三 ， 


4 绘制 渐变 要 加 单 击 “图 层 ” 

面板 下 方 的 “添加 图 层 样式 ” 

按钮 ， 在 弹出 的 下 拉 菜 单 中 先 

择 “ 浙 变 装 加 ”选项 ， 设 置 参 

数 ， 添 加 渐变 受 加 效果 ， 如 图 
所 示 。 


4 添加 文字 单 击 工具 栏 中 的 
“模版 文字 工具 ”按钮 ， 在 选 

项 栏 中 设置 宇 体 为 Swis721 BT 

Roman， 字 号 为 31 点 ， 颜 色 为 

日 色 ， 输 入 相应 文字 ， 如 图 
所 示 。 


和 7 最 终 效果 利用 同样 的 方 

法 ， 绘 制 界面 中 更 多 的 图 标 效 

果 ， 本 设计 案例 最 终 效 果 如 图 
i 


开 
应 


Photoshop APP UI 设计 从 入 门 到 精通 


10.7 
Ul 设计 师 必 读 : 如 何 设计 按钮 


设计 按钮 时 ， 除 了 考虑 美观 感 方 面 的 视觉 效果 ， 还 要 根据 它们 的 用 途 来 进行 一 些 人 性 化 的 
设计 ， 比 如 分 组 、 醒 目 、 用 词 等 ， 下 面 就 简单 给 出 按钮 设计 的 几 点 重要 建议 。 


10. 7.1 关联 分 组 


可 以 把 有 关联 的 按钮 放 在 一 起 ， 这 样 可 以 表现 出 统一 的 感觉。 


What extinct bird has been unseen 
in the wild since the 1600s? 


What extinct bird has been unseen 
in the wild since the 1600s? 


KGOHRMUMGOHEP 


十 


378 378 


加 Vancouver Canada 


四 Athens, Greece 


矶 下 噩 央 古 TM 本 也 已 懂 司 半 


3 fopw3oHTambHOS 


mid low aute ( 口 


10. 7. 2 层级 关系 


把 没有 关联 的 按钮 拉 开 一 定 距离 ， 这 样 既 可 以 比较 好 区 分 ， 还 可 以 体现 出 层级 关系 。 


HAFRY POTTER E AS MIELEHINAS 
BA MORTE FARTE 


ACESSORIOSG Fr BLUTERLAS 


EMT E a = . oNTRE t THN 


py” ri i rd hy er 出 ! 3 
Ges 7 AUTO-ATENGIMENT SG 台 | | me FREE 
, pi 有 et 
rie i i i i - 
h wp 3 


W00703 | 坟 用 中 这 


阴影 能 产生 视觉 对 比 ， 可 以 引导 用 户 看 更 加 明 腕 的 地 方 。 
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小 
己 
项 
鸣 


类 控件 制作 


10. 7.4 圆 角 边界 


用 贺 角 来 定义 边 宅 ， 不 仅 很 清晰 ， 还 很 明显 ， 而 直角 通 第 被 用 来 “分 制 ” 内 容 。 


» se Wy Searching 
10. 7.5 强调 重点 


同一 级 别 的 按钮 ， 我 们 要 突出 设计 作用 最 重要 的 那个 。 
TV Channel 9:30pm, Tus, Dec 15 


8:00pm 8:30pm 9:00pm 9:30pm 


中 N E WS M A G AZ I N E 


Werbung 
[2 
Mg 人 


有 NEWS Movie 


| 红色 的 按钮 是 最 重要 的 一 个 
10. 7.6 按钮 尺寸 


设计 时 尽量 加 大 和 触 措 点 击 面积 ， 因 为 块 状 按钮 的 触 换 面积 相对 较 大 ， 会 让 用 户 点 击 变 得 更 加 


多 。 


莘 


4 I SAMSUNG TV bp 


CREATE A DARE 


(1) MUTE ETC1 ETC2 


BHG DG YoU DARE? 
# Word 


起 六 UAThO NH 


NUMBERS 


10. 7. 7 表述 必须 明确 


当 用 户 看 到 “确定 ”“ 取 消 ” 以 及 “和 是 ”“ 人 否 ” 等 提示 按钮 的 时 候 ， 用 户 现 需要 思考 两 次 才能 
确认 。 如 果 看 到 “保存”“ 付 球 ” 等 提示 按钮 ,用户 则 可 以 直接 拿 定 主意 进行 操作 。 所 以 ， 按 钮 表 
述 必须 明确 。 


/ 日 历 和 拨号 界面 


本 章 主 要 收录 了 4 个 界面 制作 的 实战 案例 ， 涉 及 设置 图 层 
的 样式 效果 、 改 变 图 形 的 显示 区 域 等 技巧 。 通 过 这 些 实 战 练 习 ， 
读者 可 以 学 握 更 多 APP 界面 设计 方法 ， 使 自己 的 作品 显示 出 更 
加 丰富 多 彩 的 视 党 效果 。 


颜色 挫 配 
氛围 表现 
家 版 应 用 
个 性 创意 界面 设计 


1. Downloader 2 0O1 5 


i bn < 局 二 @) 「 U Qa ry gp 


Email 


Si Mon Tue Wed Thu 
ey 

4 OO@ 

11 12 13 岂 


26 20° 27028 
he 


(@ Today 
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Loading 游戏 加 载 界面 


和 矩 形 工具 、 圆 角 和 矩 形 工 具 、 根 区 


@ 光盘 路 径 
Chapter11/Media 


层 样 式 


11.1 


Level 一 一 当 进 入 页 面 加 载 时 ， 和 短暂 的 等 待 中 所 看 到 的 美丽 界面 设计 是 个 能 给 你 
放生 带 来 一 瞬间 的 惊叹 ， 让 你 不 党 得 等 竺 是 漫长 的 。 只 有 精致 的 细节 设计 ， 才 
CS4 C85 CS6 CC 最 能 考验 设计 师 的 技术 ， 同 时 也 是 最 能 打动 人 心 的 。 


本 例 是 Loading 洲 戏 加 载 界 和 面 。 设 计 师 以 深 灰 色 圆 角 和 窍 形 为 育 景 ， 通 过 添加 岁 层 伞 陈 便 其 
表现 出 立体 感 ， 整 体 颜 色 配 合 也 符合 游戏 加 载 页 面 的 意境 ， 文 学 的 添加 更 突出 了 主题 ， 最 后 
利用 图 层 样式 制作 进度 条 。 


S98 1. Downloader S99 1. Downloader 
上 Now Downloading: Now Downloading: 
return-to-cybertron.mp4 return-to-cybertron.mp4 


〇 1 打开 文件 执行 “文件 > 
打开 ”命令 ， 或 按 下 快捷 键 
oo la 
对 话 框 中 选择 素材 文件 ， 完 成 
后 单 击 “ 确 定 ” 按 钮 ， 如 图 回 
所 未 。 


0 〇 2 绘制 贺 角 矩形 单 击 工具 箱 
中 的 “ 圆 角 矩形 工具 ”按钮 ， 
在 选项 栏 中 选择 工具 的 模式 
pal a 
像素 ， 绘 制 圆 角 矩形， 如 图 
四 所 示 。 


+ | 不 透明 度 : | 100%% 
填充 : |100% | 
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3 添加 描 边 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 下 拉 菜单 中 选择 
“ 描 边 ”选项 。 之 后 在 弹出 的 “ 
层 样式 ”对 话 框 中 选择 “ 描 边 ” 
选项 ， 设 置 参数 ， 添 加 黑色 措 
边 效 果 ， 如 图 辆 国 所 示 。 

〇 4 添加 内 阴影 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 内 阴影 ”选项 。 之 后 在 弹 
出 的 “图 层 样式 ”对 话 框 中 选 
择 “ 内 阴影 ”选项 ， 设 置 参 数 ， 
添加 内 阴影 效果 ， 如 图 贺 因 
所 示 。 


(9 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 渐 变 敬 加” 选项。 之 后 在 
弹出 的 “图 层 样 起 ”对 话 框 中 
选择 “渐变 车 加 ”选项 ， 设 置 
渐 和 变色， 添加 渐变 营 加 效果 ， 

如 图 国 四 所 示 。 


0 〇 6 添加 投影 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 下 拉 菜单 中 选择 
“投影 ”选项 ,之 后 在 弹出 的 “图 
层 样式 ”对 话 框 中 选择 “投影 ” 
选项 ， 设 置 参数 ， 添 加 投影 效 
果 ， 如 图 国 因 所 示 。 


OO 7 绘制 矩形 单 击 工具 箱 中 的 
(Ae ,| Tr a nt 
pa A 
议 置 填充 为 深 灰 色 CR: 27，6G: 
2 3 2 A pl 
国 所 未 。 


描 边 

结构 
大 小 全 :全 像素 
位 置 (P); 外 部 ~ 

混合 模式 (6): 正常 到 

不 透明 度 (O): yy 100 号 


填充 类 型 (F): 颜色 ~ 


疡 色 : 国 国 
内 阴影 
结构 
混合 模式 (6): 正常 Md 
不 透明 度 (0): C ee |) % 
角度 (A): | | 国 ]” 度 网 使 用 全 局 光 (G) 
距离 (D): 1 像素 
阻塞 (0): (一 0 % 
太 小 (5): 0 像素 
品质 
各 :| - 消除 锯齿 (0) 
杂 色 (人 N): < 0 % 


| 设置 为 默认 值 “| | 复位 为 默认 值 


渐变 亚 加 
渐变 
混合 模式 (0): 滤 色 | 回 仿 色 
不 透明 度 (P): 10 % 


i EE [| 门 反 向 


样式 (0): 线性 Y ”与 图 层 对 齐 (D) 
角度 (N): | * |) 90 度 
缩放 (5): - ” 100  % 


[设置 为 默认 值 _| | 复位 为 默认 值 | 


投影 
混合 模式 (6): 正常 ~ 国 加 
不 透明 度 (D): . 3 54 % 
角度 (A): | ) 国度 园 使 用 全 局 光 (G) 
中 高 D): 0 人 蛋 素 
扩展 R): CS 0 % 
大 小 G): 区 5 ”和 像素 
品质 


#8: | S| Dstt 
杂 N: A 0 % 


:| 不 透明 度 : |100% | ~ 
谈 定 : 国 of 中 站 填充: 100%| -~ 


| 
碟 形 1 


EE 


他 || 国 世 ， 贺 角 拒 形 1 
= 国 > 


63 产 . 回 必 向 国 
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0 〇 8 添加 投影 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样 式 ” 按 
钮 ， 在 弹出 的 下 拉 沫 单 中 选择 
“投影 ”选项 ,之 后 在 弹出 的 “图 
层 样式 ”对 话 框 中 选择 “投影 ” 
选项 ， 设 置 参 数 ， 添 加 投影 认 
末 ， 如 图 国 因 所 示 。 

〇 9 绘制 正 圆 单 击 工具 箱 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
ae de a a We, 
设置 填充 为 红色 (R: 238，6G: 

吧 Suomit wi 
绘制 正 贺 ， 如 图 国 国 所 示 。 


10 添加 描 边 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 
“ 描 边 ”选项 。 之 后 在 弹出 的 “图 
层 样式 ”对 话 框 中 选择 “ 描 边 ” 
选项 ， 设 置 参 数 ， 添 加 暗 红 色 
描 边 效果 ， 如 图 因 轩 所 示 。 


1 1 添加 内 阴影 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “内 阴影 ”选项 。 之 后 在 弹 
出 的 “图 层 样 式 ” 对 话 框 中 选 
择 “ 内 阴影 ”选项 ， 设 置 参数 ， 
添加 内 阴影 效果 ， 如 图 团 
pl 


下 人 添加 内 发 光 单 击 “ 图 层 ， 
面板 下 方 的 “添加 图 层 样 式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
下 
出 的 “图 层 样式 ”对 话 框 中 选 
拌 “ 内 发 光 ” 选 项 ， 设 置 参数 ， 
次 加 内 友 光 效果 ， 如 图 图 
所 示 。 
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投影 

结构 

混合 模式 6): 正常 ” 

不 透明 度 (0): > 5 % 
角度 (A): | ”| 120 ” 度 园 使 用 全 局 光 (G) 
距离 0): 一 了 ”像素 
扩展 (R): < 9 % 
大 小 (5S): & |) 像素 

品质 


等 高 线 : | 消除 锯齿 (L) 


描 边 
结构 
大 小 (9): 二 1 像素 
位 置 (P): 内 部 
温 合 模式 (6): 正常 ” 
不 透明 度 (D): 45 驶 


填充 类 型 F): 颜色 ~ 


颜色 : 加 到 | R: 94 
6G: 17 
B: 10 
内 阴影 
结构 
混合 模式 (6): 线性 加 深 ~ 加 加 
不 透明 度 (D): 62 % 
前 度 (A): | | 120 度 冉 使 用 全 局 光 (G) 
距离 10): C 1 像素 
阻塞 (C): < 0 % 


大 小 人 :人 2 像素 
品质 


等 高 线 : ] ” | 消除 锯齿 人) 


杂 色 (N: < 0 % 


| 设置 为 默认 值 | | 复位 为 默认 值 


内 发 光 
结构 
混合 模式 (6): 线性 加 深 v 
不 透明 度 (O): 国 % 
杂 色 (N): < 0 % 
a 国 © | 
图 素 
方法 (Q): 柔和 > 
源 :器 居中 全 ”加 边 缘 (G) 
阻塞 (C0): < 0 % 
大 小 (S): 1 像素 
品质 


等 高 续 : | - 消除 锯齿 () 


pall 


进度 条 / 输入 框 / 日历 和 拨号 界面 


| 正常 * | 不 透明度: |100% | ~ 
谈 E: 加 sf 中 自 填充: 100%| 


a 
目 呈 | 精 国 1 各 
© | Hi fr = 
@ 效果 
加 投影 


| 呈 于 贺 角 拒 ft 1 


DO 加 四 .外 加 人 曾 


Photoshop APP UI 设计 从 入 门 到 精通 


1 3 添加 颜色 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 颜 色 谷 加” 选项。 之 后 在 
弹出 的 “图 层 样式 ”对 话 框 中 
选择 “颜色 装 加 ”选项 ， 设 置 
颜色 ， 添 加 颜色 针 加 效果 ， 如 
园 所 示 。 


1 4 添加 渐变 要 加 单 击 “ 图 层 ” 
VR a | 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
a py a | a 
弹出 的 “图 层 样 式 ” 对 话 框 中 
Te FE A | ee Di sn 
渐变 色 ， 添 加 渐变 全 加 效果 ， 
如 图 团 国 所 示 。 

1 95 添加 投影 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 
“投影 ”选项 ,之 后 在 弹出 的 “图 
层 样 式 ” 对 话 框 中 选择 “投影 ” 
选项 ， 设 置 参数 ,添加 投影 认 
果 ， 如 图 困 国 所 示 。 


16 绘制 椭圆 单 击 工具 箱 中 的 

“椭圆 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 
设置 填充 为 白色 ,绘制 椭圆， 
如 图 团 辆 所 示 ， 


/7 减 去 顶层 形状 再 次 单 击 工 
上 其 箱 中 的 “椭圆 工具 ”按钮 ， 
在 选项 栏 中 选择 “ 减 去 顶层 形 
状 ” 选 项 ， 绘 制 梢 圆 ， 设 置 图 
层 的 不 透明 度 为 85%， 如 图 国 
圆 上 所 示 。 


颜色 到 加 

颜色 

混合 模式 (6) 滤 色 ~ Ol 
不 透明 度 (O): 一 CS 四 % 


| 设置 为 默认 值 | | 复位 为 默认 值 Ee 


B: 0 


渐变 亚 加 

渐变 

混合 模式 (D): 正常 仿 色 

不 透明 度 (p): 75 % 
渐变 : | “| 回 反 向 (8) 
样式 人 0):” 径 向 v 辐 与 图 层 对 齐 钊 
角度 (N):| 上 | 90 度 
第 放 (S): - 110  % 

加 
口 
投影 

结构 

混合 模式 (6): 亚 加 ” 

不 透明 度 (D): 71 % 
角度 (A): | ，* | 90 度 加 | 使 用 全 局 光 (G) 
距离 {0): EE 像素 
扩展 (R): < 0 % 
大 小 (5S): & 0 像素 

品质 
等 高 续 : | - 消除 锯齿 人 ) 
杂 色 (Ni: < 0 % 

中 图 层 控 空 投影 (U) 


| 设置 为 默认 值 _| | -复位 为 默认 值 


四 


| 正常 *| 不 要 明度 : |100% | 
:图 sf 中 站 填 友 :|100%| 
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8 更 多 图 形 效果 利用 相似 方 
法 绘制 更 多 图 形 效果 ， 如 图 图 
图 所 示 。 


19 添加 文字 单 击 工具 箱 中 的 
“模版 文字 工具 ”按钮 ， 在 选 
项 栏 中 设置 字体 为 Helvetica 
和 
为 日 色 和 粉色 (CR: 226，6G: 

137, Bl560 1 竹 从 相应 六 分， 
如 图 国 国 所 示 。 


Neue， 


人 0 绘制 贺 角 矩形 单 击 工具 箱 
中 的 “ 圆 角 矩形 工具 ”按钮 ， 
在 选项 栏 中 选择 工具 的 模式 为 
“形状 ”， 设 置 填充 为 深 灰色 
CRs 2 Ge De 
径 为 20 像素 ， 绘 制 圆 角 和 矩形 ， 
如 图 国 四 所 示 。 


之 ] 添加 内 阴影 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样 式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 内 阴影 ”选项 。 之 后 在 弹 
出 的 “图 层 样 式 ” 对 话 框 中 选 
择 “ 内 阴影 ”选项 ， 设 置 参数 ， 
添加 内 阴影 效果 ， 如 图 团 
所 示 。 


2D 添加 阴影 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 下 拉 菜单 中 选择 
“投影 ”选项 ,之 后 在 弹出 的 “图 
层 样式 ”对 话 框 中 选择 “投影 ” 
选项 ， 设 置 参 数 ， 添 加 投影 
果 ， 如 图 图 加 所 示 。 
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加 多 工 宫 表 
?| 不 委 明 度 : 85% | ~ 
:加 2 中 自 。 填充 : 100% -> 


[Fl 

| 所 机 加 2 拷 贝 2 
| 届 大圆 1 拷 风 
| 局 机 图 2 拷 风 
上 刁 机 加 1 拷 风 2 


DD 六 回 外向 加 人 闸 


| EE 常 


个 透明度: |100% | " 
谈 E: 同 .中国 填充 : 100% | ~ 


1. Downloader 


Now Downloading: 


© Ea Downloading: ret 
OW Uownioaging: retur,.. 

| EE 

ed a 


| 大国 2 拷 风 2 


| | 疝 机 圆 1 擂 风 夯 丰 v- 
DD fr. 回 四 .外 加 莉 


[IP 类 型 3| 加 TITZSBN 日 
| 正常 *| 不 透明 度 : 100% | > 
入 EE: 同 2 中 自 ”填充 : 100% | 7 
| 后 二 有 
© | -- 隔 图 负 和 形 2 


© 工 


1. Downloader 


Now Downloading: 
Now Downloading: retur... 
电 | 工 文 宇 1 


.© 局 | 椭圆 2 拷贝 2 
DO 灰 . 回 人 .向 加 首 


内 阴影 

结构 

混合 模式 (6): 正常 ~ 国 国 

不 透明 度 (DO): D 100 % 1. Downloader 


前 度 (A): | ”| 120 度 同 使 用 全 局 光 (G) 


Now Downloading: 


距 敲 (D): C 1 像素 retuUrn-to-CyDertron. mpd 
阻塞 (CO): < sll % 
大 小 (5): 人 0 像素 

品质 


等 高 续 : | - 消除 锯齿 人 ) 


投影 

结构 

混合 模式 (6): 正常 ~ 

不 透明 度 (D): 2 一 一 5  % 


前 度 (A): | | 120 度 园 使 用 全 局 光 (G) 


1. Downloader 


距离 DD): < 1 像素 

扩展 (R): & 0 % Now Downloading: 

大 小 (5): /二 = 0 像素 return-to-cYybertron. mpd 
品质 

等 高 续 : | "| 口 消 除 锯 齿 (0) 

杂 色 (N): 6 0 % 
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Photoshop APP UI 设计 从 入 门 到 精通 


23 复制 图 层 选择 “ 圆 角 算 
J 900 | elie a 
合 键 将 其 复制 一 层 ， 为 其 填充 
vi ee Re Se Now Downloading: 


return-to-cybertron. mpd 


正常 | 不 透明 度 : |100% | > 


1. Downloader 医 
谈 E: 回 中 国 ”填充 : 100%| 
© 
© 


[所 圆 角 拒 形 2 拷贝 
[= 所 贺 角 j6H 2 fr 


ow a 
形 工具 ”按钮 ， 在 选项 栏 中 选 一 


@ 内 阴影 
四 投影 


Fe a a a wl 
制 算 形 ， 如 图 所 示 。 


OD .加 .向 加 荔 


描 边 


24 添加 描 边 单 击 “ 图 层 ” 面 -各 一 

板 下 方 的 “添加 图 层 样式 ” 按 et 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 天王 ow pores 
“ 摘 边 ”选项 。 之 后 在 弹出 的 “图 填充 类 型 (F) 颜色 

层 样 式 ” 对 话 框 中 选择 “ 描 边 ” :到 

选项 ， 设 置 参数 ， 添 加 黑色 描 

边 效果 ， 如 图 辆 困 所 示 。 


1. Downloader 


内 阴影 
2D 添加 内 阴影 单 击 “ 图 层 ” st 
混合 模式 人 ): 正常 a 


面板 下 方 的 “添加 图 层 样式 ” 按 不 通明 度 (O): 一 一 加” % 
忌 , 在 弹出 的 下 拉 菜 单 中 选择 “内 角度 A): 人 、) 120 。 度 团 使 用 全 局 (6) 1. Downloader 


Wa hh 距 高 D): 人 1 像素 
阴影 ”选项 。 之 后 在 弹出 的 “网 阴 赛 O: 一。 % Now Downloading: 
屋 伴 辆 骨 对 话 框 中 选择 山 内 阴影 志 大 小 (8): CPP 0 像素 return-to-Cybertron. mpd 

人 品质 
选项 ， 设 置 参 数 ， 添 加 内 阴 且 认 等 高 线 : | - 水 逐 据 齿 () 


于 》 如 图 所 示 4 杂 色 人 N): Ce | of 


[设置 为 默认 值 | | 复位 为 默认 值 | 


2 6 添加 渐变 要 加 单 击 “图 层 ” 


渐变 亚 加 
而 神 辜 咏 册 深山 图 属 和 aa 人 

加 | Wit | 混合 模式 (0): 滤 色 > 回 仿 色 

按钮 ， 在 弹出 的 下 拉 沫 单 中 选 不 透明 度 (p): 1 
Ul | 加 \ Ss 1. Downloader 
Fe a od > - 

、 、\ 工交 了 a w Dow ind: 
强 出 的 “图 层 样式 ”对 话 框 中 ee de 
选择 i 渐 2 A 车 加 Ii wl, 设置 缩放 (5): - 100  % 
参数 ， 添 加 渐变 王 加 效果 ， 如 站 本 测 记 值 ] [让 位 入 值 | 


图 所 示 。 


之 7 添加 文字 执行 “文件 》 
相册 
CO Ey 

唱和 
/ | 
上 其 位 中 的 “ 横 版 文字 工具 ” 按 Pe oa 
钮 ， 在 选项 栏 中 设置 字体 为 
HelyweaeallNeuwelE 全 
颜色 为 白色 ， 输 入 相应 文字 ， 

如 图 所 未 。 


1. Downloader 


1. Downloader 


Now Downloading: 
return-to-CYybertron. mpd 


25% 
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第 11 章 ”进度 条 /输入 框 / 日 历 和 找 号 界面 


@ 光盘 路 径 


Chapter 11/Media 


Level 一 一 一 日 历 和 拨号 界面 都 是 智能 手机 中 常见 的 界面 ， 一 个 良好 的 界面 设计 应 
人 该 考虑 到 布局 控制 、 视 觉 平衡 、 色 彩 搭配 和 文字 的 可 阅读 性 这 几 点 。 
C94 CS5 CS6 CC 


本 案例 涉及 了 日 历 界 面 和 拨号 界面 两 个 党 用 界面 。 其 中 日 历 界 面 以 紫色 为 背景 绘制 半 透 
明 效 果 ， 界 面 时 尚 又 简洁 明了 。 拨 号 界面 则 以 深 焉 色 到 浅 昌 色 的 渐变 为 背景 ， 绘制 上 个 性 化 
的 图 标 ， 倒 影 的 绘制 则 是 点 睛 之 笔 ， 使 整体 显得 精致 又 大 气 。 


2015 2015 
¢ February < February 


> > 
Sun Mon Tue Wed Thu Fi Sat Sun Mom Tue Wed Thu FF Sat 
27 28 29 .50.51 2 27 28 29 30 31 1 2 
ce “©, 
ee er 1s 8 TE 稚 16016 
17 18 19 20021 2225 17 18 19 20 21 22825 
24 25 26 27 28 29 29 24 25 26 27 28 国 29 
303112 .504 25 30 生 1 2 3 月 瑟 


O1 打开 文件 执行 “文件 > 
打开 ”命令 ， 或 按 下 快捷 键 
OB a han 
对 话 框 中 选择 素材 文件 ， 完 成 
后 单 击 “ 确 定 ” 按 钮 ， 如 图 加 
加 上 所 示 。 


(OZ2 绘制 贺 角 矩形 单 击 工具 箱 
中 的 “ 圆 角 和 矩形 工具 ”按钮 ， 
在 选项 栏 中 选择 工具 的 模式 为 
“形状 ”， 设 置 填充 为 绿色 
(CRE DAO : 22 DAA 
为 5 像素 ， 绘 制 圆 角 和 窍 形 ， 设 
管 图 层 的 填充 为 12%， 如 图 辆 
四 上 所 示 。 


Photoshop APP Ul 设计 从 入 门 到 精通 


O3 绘制 形状 单 击 工具 箱 


中 的 “钢笔 工具 ”按钮 ， 在 
选项 栏 中 选择 工具 的 模式 为 
“形状 ”， 设 置 填充 为 绿色 
(RE OW G22 Ee >A re Lal 
角 和 矩形 上 方 绘制 形状 ， 设 置 图 
层 的 填充 为 20%， 利 用 相似 方 
法 继续 在 圆 角 矩形 下 方 绘制 形 
状 ， 如 图 i 


〇 4 绘制 形状 单 击 工具 箱 中 的 

“钢笔 江 具 ”按钮 ,在 竟 项 栏 

中 选择 工具 的 模式 为 “形状 ”， 

设置 填充 为 白色 ， 绘 制 形状 ， 

设置 图 层 的 填充 为 45%， 如 图 
所 示 。 


0 〇 5 绘制 形状 单 击 工具 箱 
中 的 “钢笔 工具 ”按钮 ， 在 
选项 们 中 选择 亚 具 的 模式 为 
“形状 ”， 设 置 填充 为 绿色 
(RE SG Es WG yh | 2 
状 ， 设 置 图 层 的 填充 为 25%， 
如 图 J 
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3] 不 透明 度 : 
争 定 : 加 of 中 四 其 充 : [2 | -] 


HN 


| 王宫 < | 不 透明 度 : [100%| * | 
馈 定 : 团 2 中 四 十 充 : [45% | | 
号 下 形状 3 

EE 
© 形状 2 

区 
® | Nw! 

DO 灰 . 回 人 .看 加 首 


四 
[二 党 3] 不 过 明度 : 


镇 定 : 四 of 中 硬 车况: [25% | >] 


| A | 
0 
| 


(06 添加 蒙 版 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 蒙 版 ” 按 
负 咱 瘟 层 单 韦 回电 栏 中 的 必 夯 


笔 工具 ”按钮 ， 在 蒙 版 中 深 抹 ， 
隐 有 矛 个 需要 的 部 分 ， 如 图 
所 示 。 


O07 添加 文字 单 击 工具 栏 
FE 0 a ee i a 
钮 ， 在 选项 栏 中 设置 字体 为 
Helwe vealNewel lA et | 
号 为 “17.84”， 颜 色 分 别 为 白 
色 和 深蓝 色 (R: 10，G: 35， 
B: 84) ， 分 别 输入 相应 文字 ， 
由 | 呈 误 曾 | 全 0 人 图 属国 鸡 乏 
明度 为 65%， 如 图 Wi 


0 〇 8 绘制 形状 单 击 工具 栏 中 的 
rae se ea 
中 选择 工具 的 模式 为 “形状 ”， 
设置 填充 为 白色 ， 绘 制 形状 ， 
得 到 “形状 1” 图 层 。 之 后 按 
下 “Ctrl+J> 组 合 键 将 图 层 复制 
由 雇 , | 时 太 KOULLMT> 肌 /| 
在 画面 中 右 击 选择 “水 平 翻转 ” 
命令 ， 将 形状 向 右 平移 ， 按 下 
<Enter> 键 结束 操作 ， 如 图 

所 示 。 


2015 


+ 一 
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2018 


February 


February 


-全 


进度 条 / 输入 框 /日 历 和 拨号 界面 


一 


ox 
三 | ‘ed 


目 | 全 MS 
Pp | 加 OOTESBg 日 
| 不 透明 讼 : [100x] * | 
We 中 We: [2m [7] 


图 后 其 7 
一 一 
站 


| 正常 


- 
ED 
WE 四 /中 有。 E35] 


| 正常 


HNN 


[下 入 :| 不 村 明度 : | 
锁定 : 2 由 四 坛 充 : 


©® | sr 尖 
LY 
| 让 三 


2015 


和 曾 ww 


Photoshop APP Ul 设计 从 入 门 到 精通 


0 〇 9 添加 文字 单 击 工具 位 中 的 | ”2015 


1 人 情 限 网 前 山 届 川 接 寞 刚 伍 这 
项 栏 中 设置 字体 为 Helvetica February 
Neuelld ST hn pn 
点 和 11.91 点 ， 闫 色 分 别 为 
Ey RS CE ORE D2 0 
197，B: 219) ， 输 入 相应 文字 ， 
如 图 国 国 所 示 。 


Sat 2 16 2 29 29 


10 绘制 正 圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
3 4 A SR 
设置 填充 为 红色 (R: 255，6: 
wl, Be ss i 
绘制 正 贺 。 之 后 设置 图 层 的 混 
间 蛋 下 网 几 芝 昌 川中 图 属 榴 一 
序 为 80%， 将 图 层 移动 到 文字 
图 层 下 方 ， 如 图 因 四 所 示 。 


和 1 绘制 正 圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
Fh oe de I de ey st me A EAD, 
设置 填充 为 绿色 (R: 56，6G: 

244 ,Bs 9 ue So > 
键 绘制 正 圆 。 之 后 设置 图 层 的 
Va a 
填充 为 60%， 将 图 层 移动 到 文 
字 图 层 下 方 ， 如 图 团 园 所 示 。 


12 添加 描 边 单 击 “ 图 层 ”而 pp 7 28 29 OCS 人 和 
| | Wa | 位 置 (F): 汶 部 v 

| 4 OO: 2 

Pa a EE 11 12 ls 

话 框 中 选择 “ 描 边 ”选项 , 设 | :0 

置 参数 ， 添 加 白色 描 边 效果 ， 25 26 27 28 因 29 


如 和 多国 园 所 示 。 
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3 更 多 形状 效果 使 用 同样 方 
法 制作 其 他 形状 效果 ， 这 个 日 2015 
历 界 面 设计 案例 束 完 成 了 ， 如 


图 困 困 所 未 。 < February 2> 


Sun Mom Te WwWed Tu PP sat 


28 29 30°310l 二 


4 @@7r:s0Q) 


11 12 13 15 16 
18 19 20 2 Eee 
25 26 27 28 pS 
1 2 3 4 29 


OO Today Free Busy 


cc 扩 . 回 四 .外 辐 


[OD 


[ll iPhone 全 10:15 PM 


14 打开 文件 执行 “文件 > 
he eh 
Or OP te 
对 话 框 中 选择 素材 文件 ， 完 成 
后 蛙 击 “确定 ”按钮 ， 如 图 力 
图 所 未 。 


[ll IPhone 全 10:15 PM 


15 给 制 带 区 单 击 工具 箱 中 
Fo bs 
绘制 矩形 选区 。 之 后 新 建 图 
|| vs Er Ea eo a 
“Alt+Delete> 组 合 键 为 选区 填 
序 日 色 ， 设 置 图 层 的 不 透明 度 
为 2%， 如 图 困 国 所 示 。 


Photoshop APP UI 设计 从 入 门 到 精通 


[ll Phone 全 10:15 PM 


16 绘制 矩形 单 击 工具 箱 中 
Hy Re EI ae hl | 2 
制 窍 形 选 区 。 之 后 新 建 图 层 ， 
充 置 前 景色 为 深 量 色 CR: 
24, ess Bao ee 
《Alt+Delete》 组 合 键 为 选区 填 
充 深 蓝 色 ， 如 图 国 转 所 示 。 


| IPhone 全 10:15 PM 


7 绘制 矩形 单 击 工具 箱 中 
WE oe de 
绘制 矩形 选区 。 之 后 新 建 图 
居 Ws 
< tt De letey A el 
序 白色 ， 如 图 国 国 所 示 。 


渐变 ll IPhone 全 10:15 PM 
18 添加 渐变 效果 设置 图 层 的 | 一 
不 透明 上 度 为 100%， 单 击 “ 图 层 ” 不 透明 度 (P) : 


面板 下 方 的 “添加 图 层 样式 ” |。 忆 一 一 全 
按钮 ， 在 弹出 的 “图 层 样式 ” “we 
对 话 框 中 色 择 “渐变 ”选项 ， A 
设置 渐变 色 ， 添 加 渐变 效果 ， ， 

如 国 所 示 。 。 


Il Phone 公 10:15 PM 


19 导入 素材 执行 “文件 > 
et 
Ooo De a ls 
对 话 框 中 选择 素材 文件 ， 完 成 
后 单 击 “ 确 定 ” 按 钮 ， 将 素材 
文件 拖 搜 至 场景 文件 中 ， 如 图 
国 上 所 示 。 


AT 
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0 添加 文字 单 击 工具 箱 中 的 
“模版 文字 工具 ”按钮 ， 在 选 
项 栏 中 设置 字体 为 Acens， 字 
写 为 44.22 点 ， 颜 色 为 灰色 (R: 
风向 
相应 文字 ， 如 图 图 四 所 示 。 


之 添加 内 阴影 单 击 “ 图 层 ” 
je a 鹤 
Ea i 3 a 
Mt he i ne Ee pA Be 
设置 参数 ， 添 加 内 阴影 效果 ， 
如 图 国 国 上 所 示 。 


之 添加 渐变 效果 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 

按钮 ， 在 弹出 的 “图 层 样式 ” 

Do wr A ee ot wl, 

设置 渐变 色 ， 添 加 渐变 效果 ， 

如 图 图 贺 所 示 。 


之 3 添加 文字 单 击 工具 箱 中 的 
fa se 
项 栏 中 设置 字体 为 Acens， 字 
A 0 Ny wR ea CR: 
OO, GD Oe | QD NY 
相应 文字 ， 如 图 辆 四 所 示 。 


[li iPhone 全 


A 


10:15 PM 


4 


结构 
泥 合 模式 (BE) : 正常 下 
不 透明 度 (D) : 100 多 
锡 度 (A) 0 度 回 | 使 用 全 局 光 {G) 
是 离 (D) 0 俐 素 
限 守 (C 1 0 + 
大 小 (S) 1 僚 素 
此 页 


Yr 
[中 


福音 收 式 (0D) : 
趟 迁 明 度 (FP): 
癣 变 : 


样式 代 ) - 


锅 度 fw) f 


六 放 (5) - 


[li IPhone 全 


224 12o:30 


0 % 


li IPhone 全 10:15 PM 


正常 = | | 国 | EE a 


4 


E1100 更 


| Fan 


些 性 ”| 哮 | 与 图 层 对 齐 (I) 
we 00 和 
R: 240 口 
G: 244 
B: 246 


记 


10:15 PM 


a 
六. 加 省 . 向 周 


TIN 


Li2-H20 
LE | 
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I IPhone 全 10:15 PM 


二 4: 12:30 


2 4 给 制 亮光 单 击 工具 箱 中 的 
“画笔 了 工具” 按钮， 在 选项 栏 
eb a Ss se | 
me El RO Ge 2 
Bes ete te de ht 
需 效果 。 之 后 设置 图 层 的 混合 
模式 为 “ 滤 色 ”， 不 透明 度 为 
80%， 如 图 图 四 所 示 。 


公 10:15 PM 


2D 导入 素材 执 得 6 je 件 、 [li IPhone 


打开 ”命令 , 或 按 下 快捷 键 轩 时 5 二 放 tcis 


PO er a a 
4 
J 几 痪 到 岂 嘴 基本 
文件 拖 搜 至 场景 文件 中 ， 如 图 
困 团 所 未 。 


[li IPhone 全 10:15 PM 


2 添加 蒙 版 单 击 “图 层 ” 面 


板 下 方 的 “添加 图 层 蒙 版 " 按 国 ， JEUSSSAe 


乌 ， 单 击 工 具 箱 中 的 “画笔 工 
其” 按钮， 在 选项 栏 中 选择 “对 
角 男 疮 1 ,| 设 明 朋 景 色 为 黑色 ， 
在 家 版 中 涂抹 ， 隐 藏 不 需要 的 
郭 分， 如 图 国 国 所 示 。 


alps 


图 层 上 天道 几 牙 至 = 
[PE 四 工 品 明 国 
| 下 党 。 ”| 币 盘 明 度 : |100%| ~ 
HE: 图 sw 中 四 十 齐 : 


= | sm es 
ba 

党 图 层 3 

十: 工 切 

-Eh i 


J 绘制 形状 单 击 工具 箱 中 的 

人 
中 选择 工具 的 模式 为 “形状 ”， 
绘制 形状 ,得 到 “形状 1> 图 层 ， 
如 图 国 国 所 示 。 


之 8 添加 描 边 单 击 “图 层 " 面 ”sr 
板 下 方 的 “添加 图 层 样式 ” 按 大 小 (9): G 入 志 


位 置 (P): 外 部 


钮 ， 在 弹出 的 “图 层 样式 ”对 | omxw. -去 
话 框 中 选择 “ 描 边 ”选项 ， 设 ”| rass@o 0 
置 参数 ， 添 加 描 边 效果 ， 如 图 sxasao: 3 。 
国有 所 未 。 。 光志 (R) 
和 9 G: 29 
| 渐变 
2F9 添加 渐变 效果 单 击 “国民 ” 一 
注音 模式 1 人) : 党 -| 回 齿 
面板 下 方 的 “添加 图 层 样 式 ” 不 秋明 讼 (P) 。 100% 
到 属 桂 起 文生 | | sa 
按钮 ， 在 弹出 的 “图 层 样式 ” 反 向 (8) 
样式 民 ) : 些 性 = | 圆 与 图 层 对 齐 (T) 


对 话 框 中 选择 “渐变 营 加 ” 选 
项 ， 设 年 渐变 色 ， 添 加 渐变 效 
未 ， 如 图 国 国 所 示 。 


量 R: 10 和 R: 40 
a G: 19 a G: 45 
B: 24 B: 48 


角 库 (NW): [SY 60 一座 


葵 放 司 } : 一 -一 一 一 100 巴 


30O 复制 图 层 将 “形状 1” 图 
层 复制 一 层 ， 按 下 《Ctrl+T> 组 
合 键 后 , 在 画面 中 右 击 选择 “水 
平 翻转 ”选项 ， 将 图 像 向 右 平 
移 ， 按 下 “Entery 键 结束 操作 ， 
如 图 国 国 所 示 。 


Photoshop APP UI 设计 从 入 门 到 精通 


评 变 
| 站 的 了 
31 复制 图 层 入 用 但 似 的 妃 湿 襄 模式 (0) : 正常 回 节 色 
法 ,| 复制 图 像 。 之 后 选择 “ 形 不 透明 度 (P) : ， oo 下 
WR a 2 A Eb Ns Mla 3 0 z El 
样式 代 ) : 些 性 = | 与 图 层 对 齐 (I) 


设置 图 层 的 填充 为 0， 更 改 “ 浙 p00, EN 
变 释 加 ”选项 ,接着 单 击 “ 图 层 ” oe 
面板 下 方 的 “添加 图 层 样式 ” z 
按钮 ， 选 择 “ 渐 变 ” 选 项 ， 添 
加 渐变 效果 ， 如 图 团 国 所 示 。 


32 复制 图 层 按 下 Shifty> 键 
将 “形状 1” 和 “形状 1 拷贝 ” 型 | 回力 工 瑟 明日 
图 层 复 制 一 层 ， 右 键 单 击 图 层 | 正常 =| 不 迁 明 座 : , 
后 选择 “清除 图 层 样式 ”选项 名 定 : 图 m 中 看 第 充 : [100%|- 
册 人 次 右键 单 击 图 层 后 选择 “ 合 
并 图 层 ” 选 项 ， 将 图 像 向 下 平 
移 ， 设 置 图 层 的 不 透明 度 为 
40%， 如 图 国 国 所 示 。 


局 | | mas ay 
Lm 


也 3 添加 蒙 版 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 蒙 版 ” 按 
饥 , | 单 市 蕊 邮箱 中 的 “ 曾 笔 和 
具 ” 按 钮 ,在 选项 栏 中 选择 “有 柔 
角 画 笔 ”， 设 置 前 景色 为 黑色 ， 
在 蒙 版 中 涂抹 隐藏 不 需要 的 部 
分 ， 如 图 国 国 所 示 。 


34 绘制 形状 单 击 工 具 箱 中 的 
| ee i 
中 选择 工具 的 模式 为 “形状 ”， 
设置 填充 为 和 白色， 绘制 相应 形 岛 二 国 of 中 向。 总 训 : [60 
状 ， 如 图 国 国 所 示 。 


pyalsll 


也 5 添加 渐变 要 加 单 击 “图 层 ” 


面 帕 | 太史 
按钮 ， 在 弹出 的 “图 层 样式 ” 
设置 渐变 色 ， 添 加 渐变 效果 ， 
如 图 国 网 所 示 。 


也 添加 图 标注 释文 字 单 击 工 
具 箱 中 的 “模版 文字 工具 ” 按 
钮 ， 在 选项 栏 中 设置 字体 为 
Prank anoehel ed ome 
GA ea en 
入 图 标注 释文 字 ， 如 图 团 因 
所 示 。 


了 3 / 添加 来 电 次 数 文字 单 击 工 
具 箱 中 的 “ 横 版 文字 工具 ” 按 
钮 ， 在 选项 栏 中 设置 字体 为 
pe a Oy ea 
Dy OR OG | Ra: 

26) ， 输 入 来 电 次 数 文 字 ， 如 
园 所 示 。 


ES 


了 8 添加 描 边 单 击 “ 图 层 ” 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 “网 层 样 式 ” 对 
Wr ME Chae a | 2 my i 
置 参 数 ， 添 加 红色 描 边 效果 ， 
如 图 因 网 所 示 。 


面 


源 变 


泥 合 模式 (0) : 
不 透明 度 (FP) : 
渐变 : 

样式 (L) : 
角度 {(N) : 


缩放 (S) : 


辑 


、 
R: 155 
UJ G59 
B: 162 


综 构 
大 小 (S) : < 1 
位 置 (F): 外 部 
汤 合 模式 (5B) 正常 下 
不 透明 度 (0) » 100 
填充 类型 {F) 莓 外” 
系 色 : 国 国 + 10 
8S: 49 
B: 2 
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正常 | 回 仿 色 
100 |% 

|v| 回 反 向 (9 

线性 vw [ 串 与 图 层 对 齐 {IT) 


进度 条 / 输入 框 / 日历 和 拨号 界面 


已 9 添加 渐变 要 加 单 击 “ 图 层 ” 


面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 “图 层 样式 ” 
pe ll 
议 置 渐变 色 ， 添 加 渐变 效果 ， 
如 图 加 因 所 示 。 


4 添加 外 发 光 单 击 “图 层 ” 
面板 下 方 的 “添加 图 层 样 式 ” 
按钮 ,在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “外 发 光 ” 选 项 ， 
设置 参数 ， 添 加 外 发 光 效 果 ， 
如 图 因 团 所 示 。 


和 1 绘制 椭圆 单 击 工具 箱 中 的 
“本 贺 辐 肛 ” 近 负 ,在 这 项 烂 
中 选择 工具 的 模式 为 “形状 ”， 
设置 颜色 为 黑色 ， 绘 制 正 圆 ， 
如 图 国 国 所 示 。 


4 添加 描 边 单 击 “图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 “图 层 样 式 ” 对 
话 框 中 选择 “ 描 边 ”选项 ， 设 
置 参数 ， 添 加 橙色 描 边 效果 ， 
如 多 图 国 所 示 。 


43 添加 外 发 光 单 击 “图 层 ” 
面板 27 WR 
按钮 ， 在 弹出 的 “图 层 样 式 ” 
对 话 框 中 选 拌 “外 发 光 ” 选 项 ， 
设置 参数 ， 添 加 外 发 光 效 果 ， 
如 图 国 国 所 示 。 


Photoshop APP UI 设计 从 入 门 到 精通 


vv IYV| 与 图 层 对 齐 (I) 


渐变 
泥 合 模式 (9) : 正常 本 仿 华 
不 迁 明 度 (F) 四 > | 100 
样式 (L) : ”线性 
锡 度 (N) : 90 度 
m 
六 R: 243 
J G: 217 
B: 0 
外 发 光 
混合 模式 (E) : 正常 v 
不 透明 度 (0) a 60 2 
订 色 (N) 0 = 


R: 174 
pa 
图 素 B:_38 
方法 (89) : 条 和 vv 
扩展 (FP) 19 入 
大 小 (s) 40 俐 素 


结构 
大 小 (5): 区 5 像素 
位 置 (P):; 四 部 了 
混合 模式 (6): 正常 M4 
不 透明 度 (D): 70 % 
填充 类 型 (F): 颜色 
颜色 : 思量 
四 起 涝 
靖 构 
派 言 模式 丛 ): ”正常 ™ 
不 透明 度 (O): 75 
洒 色 (NN): 号 0 
5 图 
R:_255 
图 素 -2 
方法 所): 水 和 
扩展 人 P): 唔 0 
太 小 (5): 5 30 


Epa 


反 向 (R) 


国 


R: 255 在 
G: 156 DD 


"“° 
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人 4 绘制 形状 单 击 工具 箱 中 的 


琶 评 | 通道 | 路径 | 
“椭圆 选 框 工具 ”按钮 ， 绘 制 二 二 
正 圆 选区 ， 设 置 前 景色 为 白色 ， 
zl AN We De le te AY eat © 图 图 层 4 
区 于 ( 宛 | 辐 | ,| Oem D> e | 全 因 fe 
组 合 键 取 消 选区 ， 设 置 图 层 的 不 ee 
透明 度 为 5%， 如 图 所 示 。 友 加 @. 白 司 亩 


个 添加 描 边 单 击 工具 箱 中 的 
“画笔 工具 ”按钮 ， 在 选项 栏 


中 选择 “和 柔 角 画 笔 ”， 设 置 前 | 外 志明 度 : [50% 
景色 为 白色 。 新 建 图 层 并 绘制 诚 定 : 加 sf 中 上 自 ” 填 襄 : 50% | -> 


司 兆 。 单 击 图 层面 板 下 方 的 “ 添 

加 天 量 家 版 ”按钮 ， 再 次 单 击 

工具 箱 中 的 “画笔 工具 ”按钮 ， 

设置 前 景色 为 黑色 ， 在 楷 版 中 

闭 抹 隐 将 不 需要 的 部 分 ， 如 图 
所 示 。 


4 添加 渐变 要 加 单 击 工具 
箱 中 的 “钢笔 工具 ”按钮 ， 在 
选项 栏 中 选择 工具 的 模式 为 
形状 ， 设 置 填 充 为 栖 色 (R: 
世人 
形状 ， 如 图 a 


祸 证: 团 愉 中 国 填充 : |100%| 


4 复制 图 层 单 击 “图 层 ” 面 结构 


大 小 (5): C 1 像素 
板 | 丰 放生 NN 几 层 在 位 置 p): 外 部 ~ 
钮 ， 在 弹出 的 “图 层 样式 ”对 。 当 S 术 stE) 下 a 
不 透明 度 (O): » 100 


话 框 中 选择 “ 摘 边 ”选项 ， 设 
置 参 数 ， 添 加 标 色 描 边 效果 ， 
如 图 局 有 


填充 类 型 ): 颜色 ~ 
就 名 : 国 呈 


8 描 边 新 建 图 层 ， 按 下 Ctrl 

键 的 同时 单 击 “ 圆 ?网 层 缩 略 图 ， 

载 入 选区 ， 执 行 “ 编 辑 > 描 边 ” 

命令 ， 在 弹出 的 对 话 框 中 设置 

宽度 为 3 像素 ,颜色 为 黄色 (R: 

sy Ge us a 
所 示 。 


Photoshop APP UI 设计 从 入 门 到 精通 


oases da Sr 
[这 | 和 说: [100%[ 


| i egret > 
oT es EY ee A A I 
《Enter> 键 结束 。 之 后 右键 单 
击 图 层 ， 选 择 “ 清 除 图 层 样式 ” 
选项 ， 如 图 国 国 所 示 。 


锁定 : 团 oA 中 自 填充 : 100%| 


D 0 添加 渐变 要 加 单 击 “ 图 层 ” | 


> | Wd 混合 模式 (0): 正常 ~ 回访 色 
面板 下 方 的 “添加 图 层 样式 ” 不 透明 度 (p): 0 
安 录 样 式 变 : 6 
Fa I | EE i J 时 | 口 反 Ro) 
样式 (LD): 续 性 Y 局 与 图 技 对 齐 馈 


对 话 框 中 选择 “渐变 卷 加 ” 选 ， 下， 


缩放 侣 ); a 100  % 


加 效果 ， 如 图 国 所 示 。 . ] 


| 
天 加 而 


em 
六 R: 223 痢 R: 223 和 R: 255 
国 G2 国 122 U G: 205 
B23 BES B: 69 


pS 


要 县 | 通道 | 中 | 三 | 
Ps 并 :| 回 @TESEB 目 


下 常 不 委 了 明度: 100% | 7 | 
iE: 国 -4 中 a 填充 : lo% | 


D 1 绘制 形状 单 击 工具 箱 中 的 
(WE 本 副 风 三 迹 顺 管 
中 选择 工具 的 模式 为 “形状 ”， 


天门 地 
| LE SRI 


NT » 、 [| ~ © 身体 副本 f= 
绘制 形状 ， 之 后 设置 图 层 的 不 lout 
时 渐变 亚 加 


透明 上 度 为 0， 如 图 上 LI 了 所 示 。 


[Fi ., = 
G .四 .和 102 


| 描 边 
DZ 添加 描 边 单 击 “ 图 层 ” 面 结构 
板 yy reG 1 信和 

位 置 (P): 外 部 ~ 
66 = ~ 99 ; 
钮 ， 在 弹出 的 图 层 样 式 吧 | 混合 模式 (B): 正常 加 
三 W 不 透明 度 (o)， N100 ”% 
置 参数 ， 添 加 红色 描 边 效果 ， 填充 类 型 ): 渐变 ~ 
如 吕 轨 所 未 。 [有 [| 口 反 向 (R) 
样式 (): 线性 > 轩 与 图 层 对 齐 (9) 


加 


130 
本 | 8: 1 


SG 


D 3 添加 内 发 光 单 击 “图 层 ” 
面板 下 方 的 “添加 图 层 样 式 ” ll 
按钮 ， 在 弹出 的 “图 层 样 式 ” ee 


Te 由 6 NA 、 不 透明 度 (0): 3 75 % 
对 话 框 中 选择 “内 发 光 ” 选 项 ， 2 人 
Nae ed sl 9 图 OECD 
设置 参数 ， 添 加 内 发 光 效 果 ， mm 一 
串 图 素 170 
如 ETEB 所 示 . .EE 
源 :器 居中 人 日 回 边 缚 (G) 
阻塞 (c): 4 0  % 
大 小 (5): 2 5 像素 105 
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D4 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮， 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “渐变 普 加 ” 选 
项 ， 设 置 浙 变色 ,添加 渐变 赫 
加 效果 ， 如 图 了 四 所 示 。 


DD 绘制 形状 单 击 工具 箱 中 的 
es 
中 选择 工具 的 模式 为 “形状 ”， 
绘制 形状 ， 之 后 设置 图 层 的 不 
透明 度 为 0， 如 图 四 EE 四 所 示 。 


DO 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “渐变 琶 加 ” 选 
项 ， 设 置 渐变 色 ， 添 加 渐变 短 
加 效果 ， 如 图 El [8 所 示 。 


DP / 填充 颜色 按 下 “Ctrl> 键 
的 同时 单 击 “ 头 部 ”图 层 缩 略 
图 ， 调 出 选区 ， 设 置 前 景色 为 
om. mye 
M97 DALt Deleter ld 
合 键 为 选区 填充 颜色 ， 之 后 取 
消 先 区， 设置 图 层 的 不 透明 度 
为 60%9， 如 图 所 示 。 


第 11 章 进度 条 


渐变 
混合 模式 (0): 正常 v 由 | 仿 色 
不 透明 度 (p): = 100 % 


= 


样式 (0): 线性 了 加 与 图 层 对 齐名 
角度 (N): | 4 | 90 度 
缩 获 (5): - PS 100 % 

男 


结构 
混合 模式 (6): 正片 琶 底 ~ kt 站 
不 透明 度 (D) 一 yy 一 % 
角度 (A): | * ) 90 度 加 | 使 用 全 局 光 (G) 
距 高 D): 12 像素 
扩展 (R): < 0 % 
大 小 (S): Ee 10) 像素 
品质 
等 襄 续 :| - 消除 锯 频 QD) 
杂 色 (N): 6 0 % 


Tr ak) 
C2 产 ， 回 本 。 国 名 ] [C114 


/ 输入 框 / 日 历 和 技 号 界面 


Photoshop APP UI 设计 从 入 门 到 精通 


D8 添加 蒙 版 单 击 “图 层 ” 面 
板 下 方 的 “添加 图 层 蒙 版 ” 按 
钮 ， 再 次 单 击 工 具 箱 中 的 “ 面 
笔 工具 ”按钮 ， 设 置 前 景色 为 
黑色 ， 在 蒙 版 中 涂抹 隐藏 不 需 
要 的 部 分 ， 如 图 Eg 四 9 四 所 示 . 


DQ 绘制 高 光 利用 相似 的 方 
法 , | 绘制 其 他 稿 光 区 域 」 如 图 
加 加 不 。 


0 绘制 椭圆 单 击 工具 栏 中 的 
We Hs we hs 
A Rs 
设置 颜色 为 深蓝 色 (CR: 7，6: 
O01, L221 | 2 ,a 
图 了 [多 扩 未 。 


6 1 添加 描 边 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 “图 层 样式 ”对 
话 框 中 选择 “ 描 边 ”选项 ， 设 
置 参 数 ， 添 加 蓝 色 描 边 效果 ， 
如 图 [DIE 四 所 示 。 


Pp :| 国 站 了 避 羡 目 
后 | 不 透明 度 : |100%， J100% | = | 
iiE: 图 ww 中国 填充 : |100%| ~ | 


Pra 
在 地 六 . 回 从 国 国 ww | 16 


bee: 四 中国 [ao 


大 小 (S): Ce 
位 置 Pp): 外 部 
瘟 合 模式 (6): 正常 Me 
不 透明 度 (D): 区 100  % 


填充 类 型 (F): 
Ee: $1 


颜色 7 
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62 给 制 杭 圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 


和 100% | 
设置 颜色 为 深蓝 色 (R: 24，6: 议定 : 加 .中 看 1 
有 四 加 
轩 I 所 示 。 | 

| 


地 效果 
他 扫地 
i F-|n Fc ~ 
DD 太 . 加 全 .向 国 


63 绘制 贺 环 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 


中 选择 工具 的 模式 为 “形状 ”， ~ | 正常 。 *| 币 委 明度 : [100%| ”| 
设置 颜色 为 深蓝 色 〈R: 213, G: 议定 : 加 只 中 四 十 这:|l00%| -| 


246% B48 0 a 
后 再 次 日 击 “ 椭 圆 工 具 ” 按 钮 ， 
在 选项 栏 中 选择 “ 减 去 顶层 形 
状 ” 选 项 ， 绘 制 同心 圆 ， 如 图 
了 所 不 。 


64 添加 描 边 单 击 “图 层 ” 面 三 富 ， 


板 下 方 的 “添加 图 层 样式 ” 按 外部 和 

饥 , 在 弹出 的 “图 层 样式 ”对 混合 模式 6) 正常 - 

话 框 中 ee | pi oa 不 运 明 度 (O): 100 哆 

置 参 数 ， 添 加 白色 描 边 效果 一 

如 图 [y E 国 所 示 。 

5D 添加 渐变 到 加 单 击 “图 层 ” 本 有 和 

面板 下 方 的 “添加 图 层 样式 ” | xm 一 

全曲 全 浙 安 : [| 器 反 向 () 
样式 (0D): 续 性 ”IY 与 图 层 对 讲 人 D 


对 话 框 中 选择 “渐变 大 加 ” 选 ie 
、 Ey, 、 A 县 三 外 六 | ¢* | -90 受 
项 ， 设 置 渐 变色 ， 添 加 渐变 赫 Ct 
Wd 缩放 人 ): 二 一 100 % 
加 效 末 ， 如 图 [ 国 轿 ] 所 未 。 


<“ 国 
<“ 国 | 


Photoshop APP Ul 设计 从 入 门 到 精通 


66 添加 描 边 单 击 中 SI 面 me 全 1 像素 
位 置 P): 外 部 ~ 
poe 


， 也 2 、 66 oe 、 项 ， YL 
Cre 一 
区 加 睫 示 。 


@ / 绘制 同心 图 单 击 工具 栏 中 | 
的 “椭圆 工具 ”按钮 ， 设 置 前 | [pa ?| 加 © TO 曙 日 
景色 为 白色 ， 在 画面 中 绘制 正 | EMD 
圆 ， 再 次 单 击 “ 椭 圆 工具 ”按钮 0 Er" 
在 选项 栏 中 选择 “ 减 去 顶层 形 
状 ”选项 ， 在 画面 中 绘制 同心 
辐 ， 如 图 罗 ] 区 加 折 示 。 


EE = 
| Pa :| 国 如 荆 口 盟国 
EE 和 ovw | 
试 定 : 图 sf 中 丰 填充 :|100%| ”| 


8 添加 蒙 版 单 击 “图 层 ” 而 
板 下 方 的 “添加 图 层 蒙 版 ” 按 
钮 ， 再 次 单 击 工具 箱 中 的 “ 画 
笔 工具 ”按钮 ， 设 置 前 景色 为 
黑色 ， 在 蒙 版 中 涂抹 隐藏 不 需 
要 的 部 分 ， 如 图 图 四 所 示 。 


10:15 PM CE 


69 绘制 高 光 单 击 工具 们 中 的 
画笔 工具 ”按钮 ， 在 选项 栏 睛 半生 证 ISEie 
中 选择 “和 柔 角 画 笔 ”， 设 置 前 
景色 为 白色 。 之 后 新 建 图 层 
De a EA 
方法 绘制 其 他 高 光 效 果 从 而 
完成 本 案例 的 设计 ， 如 图 8 
四 所 示 。 


| 湖 色 * | 有 委 明 度 : 
讽 定 : 图 gf 中 看。 填 训 :|100%| "| 
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@ 光盘 路 径 
Chapter11/Media 


椭圆 工具 、 


窍 形 工具 、 圆 角 息 形 工具 : 


Level 一 对 话 框 是 人 们 联络 感情 、 传 递 信息 的 媒介 ， 短 信 、QQ 等 聊天 工具 中 都 
> 有 对 话 框 的 身影 。 一 个 绚丽 多 彩 的 聊天 对 话 框 ， 可 以 帮 使 用 者 打造 精彩 的 


Version 


CS4 CS5 CS6 CC 聊天 体验 镍 而 洒 个 企 性 做 的 对 语 慌 册 则 加 届 便 人 家 情 居 局 ， 


本 例 制作 的 是 聊天 对 话 框 。 设 计 师 首先 选择 蓝 色 到 凤 色 的 清新 风格 渐变 背景 ， 其 次 绘制 
出 对 话 框 的 圆滑 线条 ， 给 人 以 轻松 舒适 的 感觉 ， 这 种 半 透 明 的 立体 质地 叉 不 失 时 尚 ， 最 后 制 
作出 人 物 头 像 ， 这 球 消 新风 格 的 对 话 框 就 制作 完成 了 。 


〇 年 打开 文件 执行 “文件 > 
2 ee 
NOt Oe ee 
对 话 框 中 选择 素材 文件 ， 完 成 
后 蛙 击 “确定 ”按钮 结束 操作 ， 
如 图 贺 加 所 示 。 


O2 绘制 形状 单 击 工具 箱 中 的 

“钢笔 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 
设置 填充 为 和 白色， 绘制 形状 ， 
之 后 设置 图 层 的 填充 为 30%， 
如 图 国 四 所 示 。 


Photoshop APP UI 1 


(3 绘制 斜面 和 浮雕 单 击 “ 图 
层 ” 面 板 下 方 的 “添加 图 层 样 
Ey 
对 话 框 中 选择 “斜面 和 浮雕 ” 
选项 ， 设 置 参 数 ， 添 加 斜面 和 
浮雕 效果 ， 如 图 国 园 所 示 。 


〇 4 添加 描 边 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 “图 层 样 式 ” 对 
Wa ME i i a 
置 参 数 ， 添 加 灰色 描 边 效果 ， 
如 图 加 国 睫 示 。 


〇 5 添加 内 阴影 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样 式 ” 
按钮 ， 在 弹出 的 “图 层 样 式 ” 
对 话 框 中 选择 “内 阴影 ”选项 ， 
设置 参数 ， 添 加 内 阴影 效果 ， 
如 图 国 四 所 示 。 


0 〇 6 绘制 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “渐变 到 加” 选 
项 ， 设 置 渐 变色 ， 添 加 渐变 赫 
加 效果 ， 如 图 国 轧 所 示 。 


〇 了 添加 投影 单 击 “ 图 层 ” 面 
Wp A yl fs te se 
钮 ， 在 弹出 的 “图 层 样式 ”对 
三 要 同 V be 和 时 a 
置 参数 ， 添 加 投影 效果 ， 如 图 
因 加 所 示 。 


入 计 从 入 门 到 精通 


订 画 和 尘 验 
丢 构 
样式 (T): 内 刻画 vv 
方法 (Q): 平滑 v 
深度 (D) : [3 10 % 
方向 : 图 上 QF 
大 小 (7) :TY 8 像 未 
软化 (F) : ee 11 | 像 来 


朵 影 


角度 (N): 90 度 
/ \ 


使 用 全 局 光 {S) 
度 


高 度 : 4 30 


光泽 等 高 线 : 4 


高 光 模式 (8) : -| | 
不 透明 度 (0) : e100 。 % 
隔 影 模式 (A) : 正 ; 
不 透明 度 (C) :Er 49  % 


清除 饮 送 ({L) 


下 ”二 充 类 型 (F) : 声色 vv 
pe 
B: 219 
尖 阴 影 
_ 结构 _ 
混合 模式 (B) : 正常 -|| 
不 透明 度 (0): cys 50  % 
鲍 度 (A): (| 30 一 度 回 使 用 全 局 光 (G) 
人 
丐 离 (D) : 一 2 偿 素 


- 描 边 
一 竺 构 
大 小 (S) : Cs 僚 素 
位 置 (P): 内 部 v 
混合 模式 (BE) : 正常 


不 透明 度 (0) 一 50 % 


阻 守 (C): /c= 0 % 
大 小 (5): /一 0 像素 


= 


泥 合 模式 (9) : ” 生 加 v | 同 信 色 
不 透明 度 (P): ep 0  % 


sx. | ss 


样式 (L) : 线性 Y ”| 久 | 与 图 后 对 齐 (1) 


角度 (N) : (Ds 度 


编 放 (S) : i 100 % 


| 设置 为 于 认 位 | | 复位 为 默认 位 | 


- 投影 - 


一 息 构 


混合 模式 (B) : ”正片 鸽 底 ~ 加 到 
不 透明 度 (0): cy 50 % 
角度 人 : (| 50 一 度 回 使 用 全 局 光 (G) 


0 〇 8 添加 内 发 光 单 击 工具 箱 
中 的 “椭圆 工具 ”按钮 ， 在 先 
项 栏 中 选择 工具 的 模式 为 “ 形 
状 ”， 设 置 填充 为 黑色 ,绘制 
形状 ， 如 图 国 因 所 示 。 


〇 9 添加 渐变 到 加 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样 式 ” 
按钮 ， 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “渐变 疼 加 ” 选 
项 ， 设 置 浙 变色 ,添加 渐变 赫 
加 效果 ， 如 图 国 转 所 示 。 


10 绘制 椭圆 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 “图 层 样式 ”对 
话 框 中 选择 “投影 ”选项 ， 设 
置 参 数 ， 添 加 投影 效果 ， 如 图 
加 所 示 。 


1 1 添加 渐变 要 加 执行 “ 文 
fi ee iS a 
Wi EE Cm 0 ee Em | 
开 ” 对 话 框 中 选择 素材 文件 。 
pe A a 
件 中 ， 按 下 “Ctrl+T> 组 合 键 ， 
将 素材 自由 缩放 到 合适 位 置 ， 
右键 单 击 图 层 后 选择 “创建 前 
贴 蒙 厂 ”命令 , 如 图 团 园 所 示 。 


12 添加 投影 单 击 工具 箱 中 
的 “ 横 版 文字 工具 ”按钮 ， 

在 选项 栏 中 分 别 设置 字体 为 
JelwetuealINewewAdopell eed 
颜色 分 别 为 白色 、 深 灰色 〈R: 

A | Ga A UB a AA 
应 文字 完成 本 案例 设计 ， 如 图 
加 所 示 。 


一 化 构 


大 小 (S) :AS 
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位 置 (P) : 
混合 模式 {B) : 


济 部 


僚 素 


不 透明 度 (0) 7 100  % 


[一 境 充 类 型 (F): 注 变 v 
“| 口 snow 
样式 (L) : 线性 图 与 图 层 对 齐 (5) 
1 名 
ee Dp 
B: 194 一 B24 
等 构 
源 合 模式 (5) : 正片 登 话 -| 
不 透明 度 (0): cy 50  % 
条 度 (A): (上) 50 一度 回 使 用 全 局 光 (G) 
下 离 (0) : /一 了 像素 
扩展 (R) : [SP 人 = 
大 小 (5) ge 一 5 像素 


”你 认识 阿 姆 吗 ? 
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P 关 型 :| 国人 台 工 口 明 加 
[2 
Pe 
,| 
© 形状 1 
上 上 和 


图 层 


.gg 0. 白 日语 
| | 


Photoshop APP Ul 设计 从 入 门 到 精通 


个 性 报 铝 界 面 设计 


人 Al As 耳目 
有 ANNA a = 国医 三 3 


@ 光盘 路 径 
Chapter 11/Media 


CC A ml = = pa 
和 矩形 工具 、 横 版 文字 工具 、 图 


“报错 页 面 ”是 指 在 服务 器 找 不 到 指定 的 页 面 时 所 显示 的 画面 ， 如 果 

: 手机 网 页 的 报错 页 面 都 是 默认 的 画面 ， 会 显得 非常 单调 。 本 身 访问 到 错误 

有 页 面 是 不 愉快 的 用 户 体验 ， 而 有 意思 的 报错 页 面 可 以 减少 用 户 使 用 时 的 所 
折 感 ， 并 显示 网 站 对 用 户 体验 细节 的 关注 。 


Level 


本 例 是 个 性 报错 页 面 的 设计 。 设 计 师 很 有 创意 地 用 冰淇淋 来 作为 报错 页 面 的 个 性 元 友 ， 
通过 钢笔 工具 绘制 404 形 状 ， 再 结合 钢笔 工具 和 图 层 样 式 表现 冰淇淋 冰 条 融化 的 形态 ， 最 后 绘 
制 挥 落 的 着 位 ， 突 出 了 报错 界面 的 主题 ， 让 用 户 感 受到 不 一 样 且 新 奇 的 报销 界面 。 


〇 1 打开 文件 执行 “文件 > 
打开 ”命令 ,或 按 下 快捷 键 
Oyopo De a rae 
对 话 框 中 选择 素材 文件 ， 完 成 
后 单 击 “确定 ”按钮 ， 如 图 团 
加 所 示 。 


0 〇 2 绘制 形状 单 击 工具 箱 中 的 
Ol th, 
pp 
设置 填充 为 红色 (R:209, 6G:11， 
局 让 
状 1” 图 层 ， 如 图 加 四 所 示 。 
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(3 绘制 渐变 要 加 单 击 “ 形 状 
WO | Oe he le 
键 将 图 层 复制 一 层 。 之 后 单 击 
“图 层 ” 和 面板 下 方 的 “添加 图 
层 样式 ”按钮 ， 在 弹出 的 “图 
层 样式 ”对 话 框 中 选择 “渐变 
a sale eS 
加 渐变 闭 加 效果 ， 如 图 国 四 
于 | 


〇 4 复制 图 层 单 击 “ 形 状 1” 
图 层 ， 按 下 “Ctrl+J> 组 合 键 将 
图 层 复制 一 层 。 之 后 单 击 “ 图 
层 ” 面 板 下 方 的 “添加 图 层 样 
式 ” 按 乌 , 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “和 斜面 和 浮雕 ” 
选项 ， 设 置 参数 ， 添 加 斜面 和 
浮雕 效果 ， 如 图 加 国 所 示 。 


〇 5 复制 图 层 单 击 “形状 1” 
图 层 ， 按 下 “Ctrl+J> 组 合 键 将 
加 属 草 顺 | 
层 ” 面板 下方 的 “添加 图 属 样 
WN I a 
对 话 框 中 选择 “和 斜面 和 浮雕 ” 
选项 ， 设 置 参 数 ， 添 加 斜面 和 
浮雕 效果 ， 如 图 国 四 所 示 。 


0 〇 6 绘制 斜面 和 浮雕 单 击 “ 形 
状 1” 图 层 ， 按 下 Ctrl+J> 组 
合 键 将 图 层 复 制 一 层 ， 之 后 单 
BE a a a a 
图 层 样 式 ” 按 钮 ,在 弹出 的 “图 
层 样 式 ” 对 话 框 中 选择 “和 斜面 
和 浮雕 ”选项 ， 设 置 参 数 ， 添 
加 和 斜面 和 浮雕 效果 ， 如 图 国 
国 所 未 。 


i 1 


央 封 画 ” 
平 演 下 
zs 100 
SS 上 下 
1 
101 | 度 
全 用 全 局 光 (G) 
37 度 


| "| | 滨 队 钴 送 (L) 


高 光 模 式 (8) : 
不 透明 度 (0) : 


隔 影 模式 (A): 小 
不 透明 度 (C): 9 


高 度 : 


重 加 


-84 度 


| 。 | 回 使 用 全 局 光 (c) 
SA 137 度 


| -| | 清除 错 送 代 ) 


高 光 模式 (H) : ” 滤 色 
不 透明 度 (9) : zs 53 
阴影 模式 代 ) : ” 滤 色 v 
不 透明 度 (C) : < 0 
新 画 和 浮 验 
样式 (T) 尖 讲 百 v 
方法 但 ) : ”平滑 v 
深度 (D) ZS 
方向 : @ 上 下 
大 小 {2) 5 27 
软化 {F) zs 3 
际 影 
| © ) 回 使 用 全 局 光 (G) 
而 并 3 79 | 话 
光泽 等 高 线 : | - | 党 除 锯 尖 (L) 
高 光 楼 式 (8H) : ”有 柔 光 二 
不 透明 度 (0) : ZS 
隔 影 模式 (A) : ”小 色 ” 
不 透明 度 {C) : 4‘ 0 


v Vy | 与 图 层 对 齐 (I) 
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100 % 
四 反 向 (R) 


像素 
僚 素 


僚 素 
像素 


Photoshop APP Ul 设计 从 入 门 到 精通 


> 66 9 22 
07 添加 内 阴影 单 击 “ 形 状 ] 下 合 模式 (5) : 强 光 
图 层 控 个 《Ctr1+]> 组 合 键 将 0: 一 5 5 
图 层 复 制 一 层 ， 之 后 单 击 “图 入座 (): ( )】 30。 讼 团 使 用 全 局 光 (6) 


亚 离 (D) : 去 5 | 17 僚 素 


层 ” 面 板 下 方 的 “添加 图 层 样 有 中: J 0 
陈 “按钮 , 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “内 阴影 ”选项 ， 
设置 参数 ， 诺 加 内 阴影 效果 ， 
如 图 困 园 所 示 。 


〇 8 绘制 形状 单 击 工具 箱 中 的 
“钢笔 工具 ”按钮 ， 在 选项 栏 本 
中 选择 工具 的 模式 为 “形状 ”， T_T = *"™ Eo 
经 制 形 其 负 得 到 型 伏 易 和 图 属 ， pa Y 才 1 要 定 : 轩 af El [- 
设置 图 层 的 填充 为 0， 如 图 因 < AL 

四 所 示 。 


(9 添加 斜面 和 浮雕 单 击 “ 图 
属 ” 面 板 下 方 的 “添加 图 层 样 
式 ”按钮 , 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “斜面 和 浮雕 ” 
选项 ， 设 置 参数 ， 添 加 斜面 和 


Rs 四 a ry 一 一 RE P| 

浮雕 效果 ， 如 图 国 国 所 示 . = 
高 光 模 式 (E) :小 色 二 
不 适 明 度 (0) :下 5 
阴影 模式 (A) : 交 光 ~ 国 
不 透明 度 (C) : ez 97 入 


渐变 


1 0 添加 渐变 到 加 单 击 “ 图 层 ” 有 | 
面板 下 方 的 “添加 图 层 样式 ” rasee: 一， 到， 


6 区 将» 5 |v| 口 ] 反 向 (R) 
扩 馈 ， 的 图 层 样 式 样式 (L): 线性 ” Sp 
对 证 框 中 选择 中 渐变 和 伍 加 i ii 角度 (N) : | | | 90 度 
项 ， 议 凌 参 数 ， 谎 加 渐变 登 加 纺 放 (5): yy 0 


效果 ， 如 图 国 团 所 示 。 | 设 时 为 讨 认 位 | 「 香 区 为 款 认 位 | 
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1 复制 图 层 单 击 “形状 2” 
图 层 ， 按 下 “Ctrl+J> 组 合 键 将 
图 层 复制 一 层 ， 右 键 单 击 图 层 
后 选择 “清除 图 层 样 式 ”命令 。 
接着 单 击 “ 图 层 ” 面 板 下 方 的 
“添加 图 层 样式 ”按钮 ， 在 弹 
出 的 “图 层 样式 ”对 话 框 中 选 
择 “ 和 斜面 和 浮雕 ”选项 ， 设 置 
参数 ， 添 加 斜面 和 浮雕 效果 ， 
如 图 贺 园 所 示 ， 


1 2 复制 图 层 单 击 “ 形 状 2” 
图 层 ， 按 下 《Ctrl+J> 组 合 键 将 
图 层 复 制 一 层 ， 右 键 单 击 图 层 
选择 “清除 图 层 样式 ”命令 ， 

接 看 单 击 “ 图 层 ” 面 板 下 方 的 
Way Be 
出 的 “图 层 样 式 ” 对 话 框 中 选 
择 “ 和 斜面 和 浮雕 ”选项 ,设置 
参数 ， 添 加 斜面 和 浮雕 效果 ， 

如 图 图 园 所 示 。 


和 3 复制 图 层 单 击 “ 形 状 2” 
图 层 ， 按 下 《<Ctr1+]》 组 合 键 将 
图 层 复制 一 层 ， 右 键 单 击 图 层 
选择 “清除 图 层 样式 ”命令 ， 
接着 单 击 “ 图 层 ” 面 板 下 方 的 
“添加 图 层 样 式 ” 按 钮 ， 在 弹 
出 的 “图 层 样式 ”对 话 框 中 先 
择 “ 和 斜面 和 浮雕 ”选项 ， 设 置 
参数 ， 添 加 斜面 和 浮雕 效果 ， 
如 图 困 园 所 示 。 


4 创建 新 组 单 击 “图 层 ” 面 
pa pal A 

将 “形状 2” 图 层 到 “形状 2 
捞 贝 3” 图 层 拖 入 组 内 。 之 后 
按 下 <Ctr1l>》 键 同 时 单 击 “形状 
1” 图 层 缩 略 网 ， 调 出 “形状 17 
区 山大 ed te 

面板 下 方 的 “添加 矢量 蒙 版 ” 
按钮 ， 如 图 团 困 所 示 。 


高 度 : 
光泽 等 高 睫 : 


高 光 模式 (H) : 小 邓 


( 
不 透明 度 (0) : 7 20 % 
阴影 模式 (A) : 正片 司 底 | 
不 透明 度 (C) : 6 0 % 
新 画 和 尘 具 
综 构 
样式 (T) : ”外 侠 画 - 
方法 (9) : ”平滑 下 
深度 (D) : ys 100 “多 
方向 : 图 上 下 
大 小 (2) : gs 27 像素 
软化 (FE) 7 3 估 束 
课 度 (N) 180 度 
l 5 | 回 全 用 全 局 光 (G) 
高 度 : “~ 一 [85 
:| ”| 回 清除 错 送 (L) 
高 光 模 式 (H) : ” 滤 色 - 
不 透明 度 (0) : 5 40 二 
阴影 模式 人 ) : ”正片 登 底 | 
不 透明 度 (C) : LA 0 
新 画 和 泽 皮 
车 构 
样式 (T) = 浮 睹 效 轩 bd 
方法 (Q) : ”平滑 ” 
深度 (D) : ys 100 多 
方向 : @ 上 下 
大 小 (Z) : ays 16 位 素 
软化 (F) 0 僚 素 
角度 (N) : 63 度 
[| 8 |) 回合 用 全 局 光 {6) 
于 = 79 于 
| "| D0 
高 光 模 式 (H) : ” 滤 色 ” 
不 透明 度 (0) : A 67 药 
陋 影 柜 式 (a) : 交 光 ~ 国 
不 透明 度 {C) : 5 0 2 


外 诈 画 vv 
平滑 下 
zs 100 ”网 
@ 上 下 
Z5 位 索 
ZS 傍 索 
180 度 


( 5 | 回 使 用 全 局 光 (G) 
-185 | 度 


85 
| ”| 回 清除 锯 送 (1) 
路 色 
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15 绘制 阴影 新 建 图 层 ， 单 击 
工具 箱 中 的 “画笔 工具 ”按钮 ， 
在 选项 栏 中 选择 “和 柔 角 画笔 ”， 
调 低 不 透明 度 ， 设 置 前 景色 为 
黑色 ， 绘 制 阴影 ， 将 图 层 移动 
到 “形状 1” 图 层 下 方 ， 如 图 
国 所 示 。 


16 绘制 三 角形 单 击 工具 箱 中 
a ei 
DU ea te 0 fra i | 
状 ”， 设 置 填充 为 黄色 (R: 

DD aA Be iy 
HR 请) 区 

得 到 “多 边 形 1”， 如 图 团 
a 


/添加 内 阴影 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 “图 层 样式 ” 
对 话 框 中 选择 “内 阴影 ”选项 ， 
设置 参数 ， 添 加 内 阴影 效果 ， 
如 图 国 国 所 示 。 


1 8 添加 渐变 要 加 单 击 “ 图 层 ” 
面板 下 方 的 “ 深 加 图 属 样式 ? 
按钮 ， 在 弹出 的 “图 层 样式 ” 
Sh a mE ht | eh a i A 
项 ， 设 置 参 数 ， 添 加 渐变 厂 加 
效果 ， 如 图 国 国 所 示 。 


Photoshop APP Ul 设计 从 入 门 到 精通 


3 :| 不 远 习 庆 : ~ 
锁 二 加 of 中 向 。 荣 充 : [i005] 


J [ mm, i 和信 工 后 现 a | 


锁定 :- 四 of 书 丰 车 充 : 
| = 
四 | Ses: i 
=” "mo: 

EE 


产 
5 六 加 和 辐 国 曾 pi 


玫 


泥 合 模式 (B) : ” 登 加 Y 
不 透明 度 (0) 


先 度 () : | “。 |133” 度 回 使 用 全 局 光 (G) 


等 高 线 : | - 回 清除 锯 类 人 ) 


杂 色 (N) : < 


泥 合 模式 {D) : 

不 适 明 度 {P) : 
渐变 : 

样式 (1L): ; 

高 度 (N): | 

缩放 (S) : 
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19 添加 投影 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 “图 层 样式 ”对 
话 框 中 选择 “投影 ”选项 ， 设 
置 参 数 ， 添 加 投影 效果 ， 如 图 
国 所 示 。 


人 0 绘制 形状 单 击 工 具 箱 中 的 
ee = sb 关 芝 
中 选择 工具 的 模式 为 “形状 ”， 
设置 填充 为 黄色 (R: 111,， 6: 
了 
到 “形状 3” 图 层 ， 如 图 国 
所 示 。 


乙 ] 添加 渐变 要 加 单 市 “图 层 ” 
面板 下 方 的 “添加 图 层 样 式 ” 
按钮 ， 在 弹出 的 “图 层 样式 ” 
出 | 大 异同 
项 ， 设 置 参 数 ， 添 加 渐变 丢 加 
效 末 ， 如 图 团 轨 所 示 。 


2 绘制 形状 单 击 工具 箱 中 的 
“钢笔 工具 ”按钮 ， 在 选项 栏 
FH I ta A TN 
Ve EL Re BI 0 

08, DB m6D 2 SR 
到 “形状 4” 图 层 ， 如 图 图 
所 示 。 


葡 
路 
碎 
阔 
a 


不 透明 度 (0) : 


第 度 估 ) : 


渐变 


泥 合 模式 (9) : 
不 透明 度 {BE) : 


渐变 : 


样式 (LL) : 
角度 (8) : [ 


缩放 (S) : 


(B) : 正常 所 ES 
ES 37 | 多 
本 
(“| 90 度 园 使 用 全 局 光 (G) 
-大 一 一 一 一 一 10 途 素 
CPP 0 % 
ms 35 僚 素 


设置 为 就 认 位 
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[ 王 党 :| 不 透明 度 : 
甸 定 : 加 of 中 看 蕊 充 : [1008] -| 


四 | 加 开拓 3 
上 | 


国 吕 闪 过 过 1 
a 强 果 
局 内 阴影 


3 产 . 回 和 .四 里 


复位 为 的 认 仁 


人 3 添加 内 发 光 单 击 “ 形 状 3” 
图 层 ， 按 下 “Ctrl+J> 组 合 键 将 
图 层 复制 一 层 。 之 后 右键 单 击 
图 层 选择 “清除 图 层 样式 ” 命 
全 || 没 加 图 层 的 导 克 为 |0l|| 吾 
单 击 “图 层 ” 面 板 下 方 的 “ 添 
加 图 层 样 式 ” 按 钮 ， 选 择 “ 内 
发 光 ” 选 项 ， 设 置 参数 ， 添 加 
内 发 光 效果 ， 如 图 辆 四 所 示 ，。 


4 绘制 阴影 新 建 图 层 ， 单 击 
工具 箱 中 的 “画笔 工具 ”按钮 ， 
在 选项 栏 中 选择 “和 柔 角 画笔 ”， 
调 低 不 透明 度 ， 设 置 前 景色 为 
黑色 ， 绘 制 阴影 ， 之 后 将 图 层 
移动 到 “多 边 形 1” 图 层 下 方 ， 
如 图 辆 国 所 示 。 


2D 添加 文字 利用 制作 404 文 
字 的 方法 ， 制 作 其 他 效果 。 单 
击 工 具 栏 中 的 “ 横 版 文字 工 
上 只”， 在 选项 栏 中 设置 字体 为 
四 国人 各 | 
“22”， 颜 色 分 别 为 深 灰 色 〈R: 
和 
p28 te 2 ay 
相应 文字 ， 如 图 困 团 所 示 。 


之 6 绘制 贺 角 矩形 单 市 工具 栏 
中 的 “ 圆 角 和 矩形 工具 ”， 在 先 
项 栏 中 选择 工具 的 模式 为 “ 形 
J se I 
为 5 像素， 绘制 圆 角 和 矩形， 如 
图 团 国 所 示 。 


人 之/ 添加 内 阴影 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样 式 ” 
扬 击 册 宣 本 吕 鸭 鸣 图 属 俐 部 
对 话 框 中 选择 “内 阴影 ”选项 ， 
设 前 参数， 添加 内 阴影 效果 ， 
如 图 国 国 所 示 。 
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凑 : 


正片 谷底 - 
6 % 
2 
条 和 
后 中 (E)  @ 边 综 (G) 

和 办 0 区 

1 | A | 偿 素 


Looks like something went completely wrong! 


But don't worry, it can happen to the best of us, 
ond it just happened to yoo. 


内 天 影 


汤 全 模式 (6) : 
不 透明 度 (0) : 


彰 度 人 人) : 


卫 训 (Cc) 


去 小 (5): 


like something went completely wrong! 


Bat don't worry, it can happen to the best of ws, 
dit jnst happened to yow. 


- 


ls 30 二 


(1 ) -50 度 回 使 用 全 局 光 人 c) 


于 0 了 
[ 0 做 素 
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通道 | 路 径 
岂 关 对 :| 


[ 王 党 


@® | 男 有 2 
rs" 


® | 阿 形状 3 拷贝 
时 落果 
@@ 为 发 光 


cG 六 .加 信 . 各 里 


HO 


回 工 品 明 日 
*| 不 透明 度 : |100%| > 


铁定 : 轩 A 中国 填充 :oo 


:| 不 表明 座 : [100%| -| 


锁定 : 四 of 中 站 。 其 充 : [100N] -| 


[| 
二 | TT 
ess 


TT Looks like somethi... 


过 

.reo : 

区 形状 6 楼 由 4 
中 产 回 人 向 国 


| 内 关 型 * 


电工 
@ recsn a2 


CD 


But don t+ Borrs, 1... 


加 名 荆 品 明 日 
|100%| ~ | 


100%| ~ | 


Looks like somethi... 


DO .四 .和 语 辐 苗 


- 


52 


人 8 添加 内 发 光 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 选 择 “ 渐 变 大 加 ”选项 ， 
设置 参数 ， 添 加 渐变 大 加 效果 ， 
如 图 国 国 所 示 。 


29 添加 投影 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
| 戌 癌 而 
话 框 中 选择 “投影 ”选项 ， 设 
置 参数 ， 添 加 投影 效果 ， 如 图 
国 所 示 。 


也 0 添加 文字 利用 相似 方法 制 
作 更 多 按钮 效果 。 之 后 单 击 工 
= a a 
在 选项 栏 中 设置 字体 为 Myriad 
Pro pod eomdenmse dy eA 
18. 49 点 ， 需 色 为 灰色 (R: 
W280 Ge 2 B28 ul en 
相应 文字 ， 如 图 国 国 所 示 。 


了 3 1 绘制 贺 角 矩形 单 击 工具 箱 
中 的 “钢笔 工具 ”按钮 ， 在 选 
项 栏 中 选择 工具 的 模式 为 “ 形 
状 ”， 设 置 填充 为 黑色 ， 绘 制 
上 方 的 飘带 形状 ， 如 图 加 
所 示 。 


了 2 绘制 形状 单 击 工具 栏 中 的 

“模版 文字 工具 ”， 在 选项 栏 
中 设置 学 体 分 别 为 Pacifico、 
学 号 分 别 为 
QDI 8 A ea 
而 次 映 印 号 2 
38) 、 和 白色 ,输入 相应 文字 ， 
如 图 国 辆 所 示 。 


BenpasllNeue, 


渐变 


沽 全 模式 {0) : 正常 
不 透明 度 (F) : 


样式 (L) : 线性 ~ 
锡 度 (N): (“50 一度 
缩放 (S) : ys 
投影 
结构 
混合 模式 (B) : ”正片 鸽 底 
不 适 明度 (0) : cyg= 75 


第 度 ( 人 A) : | | 90 


丐 高 (D) = 人 1 

扩展 (R) : Te 0 

大 小 {(S) Sy 2 
元 所 


Looks like something went completely wrong! 
But don't worry, it can happen to the best of us, 
and it just happened to you. 
i 


Looks like something went completely wrong! 
But don't worry, it can happen to the best of us, 
ant it just happened to you. 
gi 


v 回信 和 色 


sx. | Das 


IY| 与 图 层 对 齐 (I) 


~ 国 


朗 网 | 使 下 全 局 光 {c) 


进度 条 / 输入 框 / 日 历 和 技 号 界面 
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% 


% 


僚 素 
2 
僚 素 


Looks like something went completely wrong! 
gon'ts dl en te the best of ys, 


gon't worry, it can happen te 
ant it jest happened to you. 
= 


EE 
/a 广 


过 


But don t+ Worrs, i... 


本 局 Looks like somethi... 


-oi 


fr = 
中 所. 回 必 . 四 同 


iP 类 型 $| 回 @TZSBm 国 

| 正常 | 不 透明 度 : 100%| ~ | 

中 定 : 四 of 中 旧病: [100] 
== 

© EE: 已, 形状 7 

® | T Randoam 

© 而 园 筷 拒 形 1 共 贝 2 友 |v 

二 工 Report = 
6 加 人 面 国 Fy 


忆 天 工 Random 
加 人 向 国 
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11.5 
UI 设计 师 必 读 : 如 何 设计 进度 条 


这 是 二 介 讲 究 效 骏 的 时 代 , | 第 剃 会 听 到 好 慢 吕 中“ 窜 得 烦 死 1 这 本 的 抱 乱 ,每 次 有 
a A A a ms Wy a fs ea Da tee hh Wi sD 
里 产生 英名 的 烦躁 感 。 通 过 以 下 儿 点 对 进度 条 的 改造 ， 可 以 减轻 用 户 等 行 的 烦躁 情绪 。 


1/ 


11.5.1 紧凑 型 设计 


如 末 说 等 行 是 个 漫长 的 过 程 ， 那 么 在 设计 时 可 以 利用 这 点 来 设计 出 符合 或 者 超越 用 户 期 街 
的 画面 ， 这 样 对 提升 用 户 体 验 有 所 帮助 。 

我 们 可 以 在 加 载 开 始 之 前 让 用 尸 做 好 心理 准备 ， 降 低 他 们 的 期 每 。 例 如 在 扫 搬 前 通过 弹 框 
的 方式 提醒 用 户 : 扫 拉 过程 较为 漫长 ， 请 您 耐心 等 待 。 这 样 到 最 终 扫描 结束 ， 用 户 可 能 会 发 党 
其 实 扫描 并 不 是 那么 的 漫长 ， 也 驶 变相 地 超越 了 用 户 的 期 符 。 


NEED 


想象 下， 如 末 当 进度 条 出 现 后 ， 所 有 信息 都 是 静止 的 : 进度 条 没有 移动 、 没 有 当前 扫描 
的 进度 、 没 有 变化 的 数字 ， 这 种 等 竺 会 让 用 万 产生 焦 感 和 不 安 ， 他 们 会 疑惑 “到 展 什 么 时 候 才 
会 扫描 完成 ? ”“ 计 算 机 是 否 在 正常 工作 ? ”因此 在 做 进度 条 设计 时 ， 应 该 大 量 提供 变化 的 信 
时， 给 出 足够 的 反馈 ， 让 用 户 了 解 扫 描 的 进度 ， 明 日 计算 机 在 正常 运作 ， 知 道 他 们 的 等 等 是 合 
到 的 


跳动 的 被 扫 文 件 的 名 称 
不 断 变 化 的 进度 条 
正在 岂 电 查 杀 : CWINDOWS\system32\280dd,ico 
必 暂停 取消 
已 扫描 对 象 ; 204 扫描 速率 ; 52 个 立 件 /各 扫描 时 间 ; 00:00;03 


不 断 增加 的 数字 及 时 反映 扫描 速率 的 信息 累计 的 扫描 时 间 


11.5.3 减少 等 待 时 间 


企 等 竺 的 过 程 中 罕 搬 一些 有 趣 的 事情 ， 分 散 用 户 的 注意 力 ， 来 提高 用 户 的 等 竺 体验 。 

比如 在 有 些 洲 戏 加 载 的 过 程 中 会 出 现 吃 一 些小 游戏 ， 将 用 户 的 注意 力 吸 引 到 这 个 小 洲 戏 
上 ， 从 而 不 会 关注 加 载 的 进度 。 茶 蒜 安 全 软件 也 采用 了 这 种 方法 ， 当 用 户 进入 较 长 的 扫 朱 等 生 
时 ， 界 面 上 会 弹出 气泡 提示 用 户 可 以 进入 区 肤 中 心 换 一 换 界 面 的 庶 肤 。 从 这 点 出 有 发， 很 多 加 载 
比较 慢 的 软件 都 可 以 利用 这 种 方式 ， 既 提高 了 等 生 的 体验 ， 也 起 到 了 广告 宣传 的 作用 。 


有 全 


设 直 


本 章 主要 收录 了 4 个 界面 实战 案例 , 涉及 图 层 样 式 、 混 合 模式 、 
自 定义 画笔 等 技巧 和 方法 。 通 过 本 章 的 学 习 ， 读 者 不 仅 可 以 学 
到 更 高 级 的 操作 技巧 ， 还 可 以 熟练 掌握 设计 整体 手机 界面 的 工 
作 流 程 。 


水 晶 质 感 下 
发 光 效果 表现 
画笔 工具 应 用 
矢量 工具 加 减法 
设计 导航 和 标题 栏 


人 国人 国人 时 人 时 瀛 


1035 /Kiyayao 


Node "Mm 
4 rt y 


脸谱 网 登陆 
g ml 周二 本 
推 特 登 陆 2 人 国 s 


Qt > 
EE 
100% 的 私人 安全 


区 | 有 | Mb 
200 


昌国 
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@ 光盘 路 径 
Chapter 12/Media 


Ss. 
区 | A 


Level 一 一 一 水 晶 晶 莹 剔透 、 光 芳 四 射 、 高 贵 精致 ， 历 来 深 受 人 们 青皮。 开关 则 是 
人 生活 中 必须 用 到 的 工具 ， 将 晶莹 剔透 的 水 唱和 机 械 化 的 开关 结合 在 一 起 ， 
CS4 CS5 CS6 CC 一 定 能 碰撞 出 不 一 样 的 火花 。 


本 例 是 制作 水 晶 质 感 开 关 。 设 计 师 首先 将 圆 角 矩形 进行 圆滑 处 理 ， 接 看 通过 图 层 样 式 的 
和合 加 绘制 出 立体 的 底座 ， 再 利用 类 似 方 法 表现 出 水 唱 质 感 滑动 槽 ， 然 后 绘制 立体 感 十 足 的 清 
动 块 ， 最 后 添加 文字 突出 主题 。 


OO1 新 建文 件 执行 “文件 > 新 
建 ” 人 命令， 在 弹出 的 “新 建 ” 
对 话 框 中 新 建 一 Nii 
分 别 为 1520X1040 像素 的 衬 
文档 ， Ep an 
钮 结束 。 之 后 设 前 景色 为 灰色 
QR: Ge Be 2 
按 下 快捷 键 《Alt+Delete》 填 充 
颜色 ， 如 图 加 加 所 示 。 


at 7 站 上 


记 一 3 
过 四 = 一 
| 站 


(2 绘制 回 角 和 矩形 单 击 工具 栏 。 加 
中 的 “ 圆 角 和 矩形 工具 ” 按钮 ， | 
在 选项 栏 中 选择 工具 的 模式 为 


| | | 正常 :| 下 透明 庶 : 100%| Ss 
pa 和 加 图 of 中 到。 过 涡 :1l00k| "| 


半径 为 80 像素 , 绘制 圆 角 矩形 ， @ | HH ses: 
如 图 国 加 所 示 。 四 | | 四 
04 
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站 3 添加 笠 面 和 浮 及 单 击 “ 图 “一 


层 ”面板 下 方 的 “添加 图 层 样 。 zw 二 
式 ” 按 钮 ， 在 弹出 的 下 拉 菜 er or 
中 选择 “斜面 和 浮雕 ”选项 ， WR 号 
设置 参数 ， 添 加 斜面 和 浮雕 效 sw < 


a * | 癌 | 使 用 全 局 光 (G) 
朱 ， 如 器 所 示 。 高 度 : < |30 | 度 
光泽 等 高 线 : Pg 要 清 队 乌江 (1) 


高 光 模 式 (H) : 正常 v 
不 透明 度 (0) 100 
R: 204 
阴影 模式 他) : 正常 G: 204 
B: 204 
不 透明 度 (C) : 100 入 


(4 添加 渐变 要 加 单 击 “ 图 层 ” = 
VE 添加 图 层 样式 ” 混合 模式 (0) : 正常 ~ 回访 色 


按钮 ， 在 弹出 的 下 拉 菜 单 中 选 ”天 站 和 on 
择 “ 渐 变 合 加” 选项， 设置 参 样式 (L) : 线性 ~ 园 与 图 层 对 齐 (I) 
数 ， 添 加 渐变 三 加 效果 ,加 图 ， 
国 所 示 。 | 


5 添加 投影 单 击 “ 图 层 ” 面 a 
板 下 方 的 “添加 图 层 样式 ” 按 ”汉人 式 由 三 四 | 国生 
可 


、 由 | 不 透明 度 (0) : ey、 100 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 一 
、 Wa a a | 角度 全 ) :| ， | 90 度 回 使 用 全 局 光 () 
“投影 ”选项 ， 设 置 参数 ， 添 2 
芹 敲 (D0) : se 10 恤 素 


加 投影 效果 ， 如 图 加 四 所 示 。 扩展 ( 辣 gr 


大 小 (9) PPee: 22 | 估 素 [四 


OO6 绘制 贺 角 矩形 单 击 工具 栏 
中 的 “ 圆 角 矩形 工具 ”按钮 ， 
在 选项 栏 中 选择 工具 的 模式 为 


| 正常 + | 下 适 明度 | 1oox| > | 
“形状 ”， 设 置 填 充 为 深 灰 色 钙 定 : 加 _W 趾 日 填充: | ] 


CR oO G6 pe & Fr 加 锡 红 形 2 i 
A » 证 有 此 | 

径 为 60 像素 ， 绘 制 圆 角 和 矩形 ， & 上 语 回 备 拒 形 1 司 
如 图 国 因 所 示 ，。 局 落果 


必 许 面 和 浮 由 _ 
co 所 回 台 和 白 回 苗 蕊 


(OO 7 添加 渐变 要 加 单 击 “ 图 层 ” “= 
面板 下 方 的 “添加 图 层 样式 ” 混合 模式 (0) : 正常 ~ 回访 色 


| | 不 透明 度 (P) : 100 % 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 3 六 [本 本 囊 证 二 十 || | 二 二 (=) 
择 66 渐变 过 加 2 选项 | 设置 参 样式 位 ) : 线性 v 图 | 与 图 层 对 齐 {I) 


角度 (人 N: 人 1 90 度 


数 ， 添 加 渐变 蚕 加 效果 ， 如 图 
四 所 示 . 7 
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(0 〇 8B 添加 文字 单 击 工具 栏 中 
的 “ 横 版 文字 工具 ”按钮 ， 在 
选项 柱 中 设置 学 体 为 Swis721 
[BI BT Bae le ee a i A 
司 , | 喘 色 为 次 色 | (R; 128,| G6: 

128，B: 128) ， 输 入 相应 文字 ， 
如 图 因 办 所 示 。 


( 〇 9 绘制 加 角 矩 形 单 击 工 具 栏 
电 的 全 圆 角 和 兴 形 并 具 ” 按 钮 ， 
在 选项 栏 中 选择 工具 的 模式 为 镍 定 站 中 是 其 充 : 
ee tan i 
半径 为 80 像素, 绘制 融 角 矩形， 
如 图 国 因 所 示 。 


诗 画 和 和 渗 验 


1 0 添加 创面 和 肖 脱 单 击 “ 图 “ 


层 ”面板 下 方 的 “添加 图 层 样 。 ze ss - 
式 ”按钮 ， 在 弹出 的 下 拉 菜 单 oo 
中 选择 “斜面 和 浮雕” 选项 ww 工人 
设置 参数 ， 添 加 斜面 和 浮雕 效 sz 


上 斥 9 加 图 困 团 所 示 B) 高 度 : 一 60 | 度 
rs: | "| 清除 闫 类 (1) 


高 光 模式 (H) : 正常 和 
不 透明 度 (0) :一 100 5 


阴影 模式 他 ) : 正常 v 


不 透明 度 (C) :AS 0 % 


生活 加 渐变 要 加 单 击 “图 层 ” “> 
面板 下 方 的 “添加 图 层 样式 ” ”0: EE% Mas 


| 不 透明 度 (P) : PN 100 % 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 光 : [一 一]z] 口上 四 
择 66 渐变 车 加 2 选项 | 设置 参 样式 ({L) : YY ”| 与 图 后 对 齐 (I) 


角度 (N) : | 100 度 


数 ， 添 加 渐变 车 加 效果 ， 如 图 = 

Bl 5 殉 折 示 。 

21| 园 所 未 ee Dr: 242 Or: 235 R227 

生 。 a 到 1 


四 中 刀 
GD 
fo 
由 
~ 
GD 
人 
Co 
a 


2 最 终 效果 利用 相似 方法 给 
制 更 多 形状 效果 从 而 完成 本 例 
设计 ， 如 图 图 园 所 示 。 


@ | | 家 名 


器 灰 回 OO 牟 司 徊 
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@ 光盘 路 径 
Chapter 12/Media 


py a Keywor' 画笔 工具 、 和 矩形 工具 、 圆 角 矩 形 工具 、 椭 圆 工 具 、 

| 本 | 

a 发 光 效 果 是 设计 中 经 常用 到 的 ， 该 效果 往往 给 人 以 唯 时 
尚 、 高 端的 感觉 。 这 种 发 光 效 果 ， 可 以 有 效 增加 场景 的 表现 力 ， 表 达 一 种 

Ji 清晰 醒目 的 特点 同时 充分 合理 地 使 用 这 一 效果 ， 往 往 能 够 给 用 户 一 种 画 


CS4 CS5 CS6 CC 


质 动感 十 是 、 引 人 入 胜 的 关 好 体验 。 


本 例 是 制作 发 光 效 果 。 设 计 师 首先 采用 正面 莫 空 的 半 透 明 材 质 使 人 仿佛 身 临 其 境 ， 之 
后 通过 添加 素材 、 颜 色 等 制造 出 高 科技 的 感 党 ， 最 后 添加 的 发 光 效 束 使 要 表达 的 内 容 清晰 醒 
目 ， 增 强 了 画面 的 表现 力 。 


i “i Tv 
ja ja- 
| We aa 图 ec 图 局 


〇 1 新 建文 件 执行 “文件 > 新 
建 ” 命 令 ， 在 弹出 的 “新 建 ” 
对 话 框 中 新 建 一 个 宽度 和 高 度 [和 


分 别 为 1024X612 像素 的 空白 入 证 : 国 sf 中 和 到 
文档 ， 完 成 后 单 击 “ 确 定 ” 按 四 | | 二 所 


钮 结束 ， 如 图 辆 贺 所 示 。 


01 9 友 回力 四 恒 站 区 


(02 添加 渐变 要 加 单 击 “ 图 层 ” = 

面板 下 方 的 “添加 图 层 样式 ” 0: 2 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 wx [Cn as 

择 “ 渐 变 营 加 ”选项 ， 设 置 参 样式 (L) : 一 ~ 园 与 图 层 对 齐 (I) 
数 ， 添 加 渐变 受 加 效果 , 如 图 。 一 | 
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(3 绘制 国 角 短 形 单 击 工具 栏 


中 的 “ 圆 角 和 矩形 工具 ”按钮 ， 
a FE I hy to EA No ria 
设置 填充 为 蓝 色 (R: 58，6: 
L106 B22D| ,从 罗 120 人 于 
绘制 圆 角 和 矩形， 之 后 设置 图 层 
的 填充 为 3%, 如 图 国 国 所 示 。 


〇 4 添加 描 边 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 
“ 描 边 ”选项 ， 设 置 参 数 ， 添 


加 描 边 效果 ， 如 图 国 国 所 示 。 


〇 5 添加 内 发 光 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样 式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
a a 
次 加 内 发 光 效 果 ， 如 图 国 
Di 


0 添加 投影 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 
Wa Ma eA 
加 投影 效果 ， 如 图 国 因 所 示 。 


(OO 7 复制 贺 角 和 矩形 复制 “ 圆 角 
矩形 1” 图 层 ， 清 除 图 层 样 式 。 
之 后 单 击 “ 图 层 ” 面 板 下 方 的 
“添加 图 层 样式 ”按钮 ， 在 弹 
出 的 下 拉 菜 单 中 选择 “外 发 
光 ”， 设 置 参数 ， 添 加 外 发 光 
效果 ， 再 右键 单 击 图 层 ， 选 择 
“ 栅 格 化 图 层 样式 ”命令 ， 如 
图 因 四 所 示 。 


通道 | 路径 三 
万 关 型 < DTISBm 日 
正常 $ | 不 透明 度 : 
锦 定 : 加 w 中 古寺 充 : [3%x | |] 
下 IE A 1 


| | 大寺 友 ~ 
时 


效果 
时 洁 变 登 加 


. 描记 
| 
太 小 (5) : | 尾 素 
和 位 置 fE): 外 部 = 
驻 各 模式 人 避 ): 正常 下 
不 透明 度 (0): yg====sS 39 |%% 
一 ”填充 类 型 {F): 前 色 = 
裔 所 : | | 
. 了 困 发 光 
| 
误 各 模式 人) : 淖 色 过 
不 透明 度 人 (0) ee 二 史 


DO .四 . 向 加 首 


亲 色 的 /一 5 
® | © | 
R: 187 
”图 素 B; 245 
方法 但 }: 柔和 = 
温 : 加 后 中 但 ) 元 边 问 
阻 审 人 一 一 一 一 0 驳 
大 小 9): 一 2 一 一 55 全 [9 
_ 苦 构 
泥 合 权 式 名 ) :正片 合计 ~ 国 加 
不 透明 度 (0) : y= 0 5 
第 亩 (A) : (W120” 度 同 使 用 全 局 光 (G6) 
路 离 D) : /一 3 像素 
扩展 (): J 0 
大 小 {9): 一 = 3 B11 
,着 索 学 
5 板 
驻 香 模式 局 1: 让 色 
不 透明 度 (0) : eye 国 % 
亲 包 他 : /一 0 
加 本 © | 
97 
__ 图表 8: 242 
方法 I@): 柔和 和 = 
扩展 (P) :0 
大 小 (9): pe 一 了 像素 
-#8 上 国 
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0 〇 8 添加 蒙 版 单 击 图 层面 板 下 
方 的 “添加 矢量 蒙 版 ”按钮 ， 
添加 蒙 版 , 单 击 工具 栏 中 的 “ 画 
笔 工 具 ” 按 钮 ， 设 置 前 景色 为 
黑色 ， 在 蒙 版 中 进行 涂抹 ， 如 
图 困 四 所 示 ，。 


〇 9 绘制 亮光 新 建 图 层 ， 单 击 
工具 栏 中 的 “画笔 工具 ”按钮 ， 
在 选项 栏 中 选择 “和 柔 角 画笔 ”， 
设置 前 景色 为 白色 ， 绘 制 亮光 ， 
设置 图 层 的 混合 模式 为 着 加 ， 
如 图 园 国 所 示 。 


10 绘制 亮光 新 建 图 层 ， 单 击 
WO tl hry rs Le 
在 选项 栏 中 选择 柔 角 画笔 ， 设 
站 有 天 景色 为 监 鱼 CR NG 
204 B25 利 | 
用 相似 方法 绘制 更 多 效果 ， 如 
图 因 团 所 示 。 


1 添加 文字 单 击 工具 栏 中 的 
“模版 文字 工具 ”按钮 ， 在 选 
项 栏 中 设置 学 体 为 Helvetica 
Neuwe Mm | se A nat, 
颜色 为 黑色 ， 输 入 文字 ， 如 图 
园 所 示 。 


2 添加 投影 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样 式 ” 按 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 
“投影 ”选项 ， 设 置 参数 ， 添 
加 投影 效果 ， 如 图 国 团 所 示 。 
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[Pp#s ;| 加 OTHD 
十: 图 of 中 四 半 充 : 


. EEL. 


| 
正常 $ | 不 透明 度 : 
铁定 : 图 A 中 看。 寺 充 : 
SET 
_| L i 
fr = 


锁定 : 四 A 中 自 总 充 : 
®@ [JB[ -大生 大 


@ | 且说 多 二 才 1: tr 


四 
混合 模式 全 ) : 正常 ~ le 2 
不 适 明 度 (D) : cp、 100 5 
杀 讼 (A) : (1 0 ” 度 回 属 用 全 局 光 (G) 
二 DA 


扩展 全 :0 5 
大 小 (6) : PT 像素 


_ 上 品质 


sss:| A"| 站 清 嘻 错 省 人) 
条 和 全 :0 


ppl 


1 3 绘制 矩形 单 击 工具 栏 中 的 
“矩形 工具 ”按钮 ， 在 选项 栏 中 
a i ra my 4 
议 丫 赎 允 为 矣 色 \(R:|61, 0G: 
4 量 宝宝 市 由 二 矶 
行 “ 滤 镜 > 转化 为 智能 滤 镜 ” 命 
令 ， 再 执行 “ 滤 镜 > 模糊 > 高 斯 
模糊 ”命令 ， 利 用 相似 方法 绘制 
其 他 效果 ， 如 图 困 园 所 未 。 


14 导入 素材 执行 “文件 > 打 
开 ” 命 令 , 弹出 “打开 ”对 话 框 ， 
选择 夫 材 文件 并 打开 ， 将 其 拖 
搜 至 场景 文件 中 ， 移 动 到 合适 
位 置 ， 如 图 加 园 所 示 ，。 


9 绘制 高 光 单 击 工具 栏 中 的 
“钢笔 工具 ”按钮 ， 在 选项 栏 
中 形 类 7 
Wo Tn wn 
设置 图 层 的 填充 为 3%， 如 图 园 
圆 上 所 示 。 


16 导入 素材 执行 “文件 > 打 
A 
选择 素材 文件 并 打开 ， 将 其 拖 
搜 至 场景 文件 中 ， 移 动 到 合适 
位 置 ， 设 置 填充 为 15%， 如 图 
图 所 示 。 


7 新 建 组 将 “图 层 4” 到 “图 
BA a 
Bs a 
钮 ， 在 选项 栏 中 设置 羽化 为 10 
像素 ， 绘 制 矩 形 选 区 ， 单 击 图 
层面 板 下 方 的 “添加 矢量 蒙 版 ” 
按钮 ， 添 加 莹 版， 如 图 图 
后 呈 
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加 


国 ”100% 


半径 由: f 曲 像素 
CF 
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预览 Ff) 


复位 


用 倡 由 Wf 三 
Pp :| 加 外 荆 口 骨 EE 
Ee 
We 国定 并 | EE 


®@ Ee | 图 层 4 
© 下 搬 1 类 nn 。@| 
®| | 符 能 渡 答 


时 高 斯 柜 相 斑 


Da eT 一 


让 党 hn 
: 回 A 中 日。 和 这 


i 
了 到 图 层 4 
®® [同和 过: 关 n < 


@| 
co 友 . 四 刀 . 固 上 国 


也 下 | 哨 任 7 三 
PP 类 型 ?| 国 台 工 品 明 国 
Eo 
WA/ 中公 。 5 


e [3 图 层 5 
时 卫 
® | |] 加 4 

Er 


rm i 
泾 *| 不 透明 度 : [100%| > | 
争 定 站 LA 中 四 9 
。 7 号 中 村 Te 


| 二 


1 8 绘制 亮光 单 击 工具 栏 中 
ES a Nd 
ps a | 
Ria A Ea A 
3 点 ， 颜 色 为 赣 色 (CR: 230,， 6G: 
BES Be | AD 2 Ws ooh bl ny 
图 国 国 所 示 。 


1 9 添加 文字 单 击 工具 栏 中 的 
“模版 文字 工具 ”按钮 ， 在 选 
项 栏 中 设置 学 体 为 Helvetica 
ene Nl io nl ee A lA sal), 
pe yy en Re 1230 
2380 B22 4 i ee yA 
用 相似 方法 绘制 更 多 效果 ， 如 
图 国 困 所 示 。 


0 绘制 矩形 单 击 工具 栏 中 的 
| a re el 
i te A 
a ty i mR fe RY: G0 

70，B: 70) ， 绘 制 矩 形 ， 如 图 
四 所 未 。 


之 ] 绘制 贺 角 矩形 利用 以 上 方 
法 绘制 发 光 效 果 ， 单 击 工具 栏 
中 的 “ 圆 角 上 矩形 工具 ”按钮 ， 

在 选项 栏 中 选择 工具 的 模式 为 
“形状 ”， 设 置 填充 深 灰 色 (R: 

Bp Ea a ss sy 
10 像素 ， 绘 制 圆 角 和 矩形， 如 图 
四 所 未 。 


人 绘制 矩形 单 击 工 具 栏 中 的 
矩形 卫 具 ” 按钮， 在 选项 栏 
na de Lm 
吧 业 OR: 5 : 
56, B: 56) 和 蓝 色 (R: 83，6G: 
220, B20 | A 
名 图 四 所 示 。 
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图 层 | 志和 站 | 跑 径 
[pa | 国 @ 工 | 口 | 辣 
正常 $ | 不 透明 度 : 
锁定 : 图 中 四 长 充 : 
| 矩形 2 到 
J 
© 4 Setting 


© 下 形状 4 


电 | T Sound 


通道 | 路 径 


办 关 型 | 国 允 荆 口 明 目 
二 党 3] 不 迁 轨 度 : 


锁定 : 加 A 中 四 填充 :|100%| > | 
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2F 3 添加 蒙 版 单 击 图 层面 板 下 
方 的 “添加 矢量 蒙 版 ”按钮 ， 添 加 
蒙 版 ， 单 击 工具 栏 中 的 “ 面 笔 
工具 ”按钮 ， 设 置 前 景色 为 黑 
色 ， 在 蒙 版 中 进行 涂抹 ， 利 用 
相似 方法 绘制 其 他 效果 ， 如 图 
困 所 未 。 


依 44 绘制 椭圆 单 击 工 具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 
设置 填充 为 白色 ， 绘 制 正 圆 ， 
设置 图 层 的 填充 为 30%， 如 图 
图 所 示 。 


| 正常 :| 不 透明 度 : 
证: 回 A 中 个。 坟 : [505]-] 

I a 
® | 后 柄 加 : 和 
® | T Standard 70 50 45 ... 


® | T Vode Brightness Co... 


组 2 搂 见 4 
DD fF_ 回 .向 加 首 


25 添加 描 边 单 击 图 层面 板 下 i 
方 的 “添加 图 层 样式 ”按钮 ， CR 
在 弹出 的 下 拉 菜 单 中 选择 “ 描 2 
边 ”选项 , 设置 参数 , 添加 描 边 ， 7 是 各: 一 10 5 
如 图 图 辆 所 示 。 加 十 充 尖 型 (F) [本 = 四 

起色 :| | 


2 添加 文字 单 击 工具 栏 中 的 
“ 模 | 避 DO 有 具 控 仙 在 过 
项 栏 中 设置 学 体 为 Helvetica 
Neuelllby prow MO 
8 点 ， 颜 色 为 白色 、 蓝 色 (R: 
23060 G3 Do 2 4 A 
文字 ， 利 用 相似 方法 绘制 更 多 
效果 ， 如 图 团 国 所 示 。 


人 了 新 建 组 将 除 背景 图 层 外 的 
所 有 图 层 新 建 为 一 个 组 ， 单 击 
图 层面 板 下 方 的 “创建 新 的 填 
充 或 调整 图 层 ” 按 钮 , 选择 “有 曲 
线 ”， 设 置 参 数 ， 右 键 单 击 图 
层 , 选择 “创建 前 贴 蒙 版 选项 ， 
如 图 国 国 所 示 。 
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@ 光盘 路 径 
Chapter12/Media 


窍 形 工 具 、 


/ 
4 


= el a A | = 本 [大 三 


工 二 = | 、 


Level 一 一 一 未 见 其 人 先 闻 其 声 ， 声 音 与 人 们 的 生活 息息相关， 音量 界面 当然 也 就 
A 不 可 或 缺 。 音 量 界 面 设 计 是 手机 中 最 基础 的 典型 画面 之 一 ， 好 的 音量 界面 
CS4 CS5 CS6 CC 设计 可 以 提高 用 户 使 用 时 的 品质 体验 。 


本 例 是 音量 设置 界面 制作 ， 设 计 师 以 深 灰 色 和 篮 色 为 背景 ， 让 男 面 看 起 来 知 洁 明 了 ， 清 
晰 的 按钮 设计 不 会 让 人 和 觉得 繁琐 、 难 理解 ， 最 后 绘制 的 闹钟 简 单 又 不 失 设计 感 ， 整 个 界面 简 
消 大 方 、 便 于 操作 。 


eeeoo BELL 全 4:21 PM eeeoo BELL 全 4:21 PM 


闸 钟 提醒 


eeeoo BELL 全 


O1 新 建文 件 执行 “文件 > 打 
开 ” 命 令 ， 在 弹出 的 “打开 ” 
对 话 框 中 ， 选 择 素材 文件 并 打 
开 ， 如 图 国 所 示 。 


[ 正 党 3] 不 透明 度 : 
锦 十 : 国 | w 中 日。 其: 


ee 
晶 || | 背景 的 


5 加 合同 曾 屁 
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eeeoo BELL 全 pm | 


0 〇 2 绘制 形状 单 击 工具 栏 中 的 
“定形 工具 ”按钮 ， 在 选项 栏 
Pha 4 I tA 
设置 填充 为 深 灰 色 (R: 42，6: 
人 ,| Be DOD 2 Nw 
加 所 示 。 


0 〇 3 添加 文字 单 击 工具 栏 中 
的 “ 横 版 文字 工具 ”按钮 ， 在 
选项 栏 中 设置 字体 为 Adobe 
体 8$td,， 字号 为 24 点 ,颜色 
py ye en RG Ge do Bt 
159) 、 日 色 ， 输 入 相应 文字 ， 
如 图 国 因 所 示 。 


〇 4 绘制 按钮 单 击 工具 栏 中 的 
sa ean 
中 选择 工具 的 模式 为 “形状 ”， 
设置 填充 为 白色 ， 绘 制 矩形 ， 
旋转 角度 ， 利 用 相同 方法 绘制 
完整 效果 ， 如 图 加 国 所 示 。 


eeeoo BELL 全 A 


〇 5 绘制 贺 角 矩形 单 击 工具 栏 
中 的 “ 圆 角 矩形 工具 ”按钮 ， rd tise bl Ne 
在 选项 栏 中 选择 工具 的 模式 为 
“形状 ”, 设置 填充 为 深 灰 色 (CR: 
A pe a se io yl 
ww | |e OR sO m2 BE 
195，) ,分 别 绘制 圆 角 和 矩形 ， 
如 图 国 四 所 示 。 
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O6 绘制 椭圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 
设置 填充 为 白色 ， 分 别 绘制 椭 
圆 ， 如 图 贺 因 所 示 。 


(OO 7 添加 内 阴影 单 击 “ 图 层 ” 
Wt a A wh | a 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 内 阴影 ”选项 ， 设 置 参数 ， 
添加 内 阴影 效果 ， 如 图 国 
所 示 。 


O8 绘制 椭圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 
设置 填充 为 白色 ， 分 别 绘制 椭 
圆 ， 如 图 困 四 所 示 。 


0O9 添加 描 边 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样式 ” 按 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 
“ 描 边 ”选项 ， 设 置 参数 ， 添 
加 描 边 ， 利 用 相同 方法 绘制 完 
整 效 果 ， 如 图 国 国 所 示 ，。 
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22% jp 


[ 正常 :| 示 过 量度 : [00x| -| 
锁定 辐 of 中 夯 。 基 交 : [10od 


局 党 李 圆 1 
芝 | 
回 间 容 形 2 
° Ip 
Ei 园 负 所 带 1 E 


5 太 回 轴 丰 国 闸 了 且 


内 阴影 eeeoc BELL 倒 22% 四 
芷 构 
混合 模式 (6) :正片 鸽 底 -~ 国 提示 铃声 活着 > 
不 透明 度 (0) : 30 而 

条 度 (4): | | ) -30 ” 讼 四 合用 全 户 光 {c) 本 于 帅 

距离 (D) : pe= 4 像素 

大 小 (9) : /一 0 俐 来 
品 而 


等 高 此 | - 回 清除 狗 凑 全 ) 


亲 色 (于 :人 多 


eeeo0c BELL 全 22% , 


活着 > 


大 小 (5) : 一 = 
位 置 (F): 内 部 = 
驻 千 模式 佑 1 :- 正常 下 
不 迁 明 度 (0) : 一 = 人 
填充 淆 型 人 1): ， 裔 色 = 
珊 色 : 
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1 0 绘制 矩形 单 击 工具 栏 中 的 
“矩形 工具 ”按钮 ， 在 选项 栏 
Fh i a tl; 
妈 置 填充 为 深 监 色 CR: 27， 

Ee Ma 关 国 天 2 
反 INIROEEAOS 细 全 键 川 时 榨 遇 
“Ctrl+V> 组 合 键 复 制 矩形 ， 按 
nl 

按 下 XEnter》 键 结束 ， 最 后 按 
下 XShift+Alt+Ctrl+T> 组 合 键 
复制 并 旋转 和 矩形， 如 图 因 
所 示 。 


1 1 绘制 椭圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
中 选 换 “合并 形状 1 和 克 项 ,| 按 
IN SS o> | 册 光 
二 
项 栏 中 选择 “ 减 去 顶层 形状 ” 
J RI Shani > a2 
册 ， 利 用 相似 的 方法 绘制 完整 
图 标 ， 如 图 团 团 困 所 示 ， 


和 12 添加 文字 单 击 工具 栏 中 的 
el et ee 


项 栏 中 设置 字体 为 Adobe | 正常  *] 不 各 明度 : 
体 Std， 字 号 为 40 点， 颜色 锁定 : 回 of 中 看。 车 充 : [190%| | 
日 色 ， 输 入 相应 文字 ， 如 图 园 地 | 工 。 亲 名 投 本 
弛 所 示 。 | 
jo > [Tw 

LH 


名 |T 筷 顶部 
人 恒 


13 添加 投影 单 击 “ 图 层 ” 面 【ss i 交 
0 
钮 ， 在 弹出 的 下 拉 菜 单 中 选择 印度 人 : | 中 一度 问 使 用 全 局 光 人 c) 
“投影 ”选项 ， 设 置 参数 ， 添 RD A 一 一 
加 投影 效果 ， 如 图 困 园 所 示 。 de 一 
蓉 揣 
=ss:| A 国 E 
杂 色 (N) : (5 0 % 
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1 4 绘制 李 圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
oe hs A 
设置 填充 为 深蓝 色 (R: 27，6G: 
L230 BA ha ii b> 
刍 绘 制 正 加 ， 再 次 单 击 “ 椭 加 
Dea ath, | ola AR es eh 
需 多 为 自 色 ， 选 择 “ 新 建 图 层 ” 
选项 ， 绘 制 同心 圆 ， 如 图 国 
轩 所 示 。 


1 9 绘制 刻度 单 击 工具 栏 中 的 
0 a ea | ae 
DO ole I ey hs Ry 
RN a i A (| HA 
为 9 人保 沫 vw 从 加 加 胃 入 于 省 复 
市 几 图 忆 0 下 GOb4>|2| 售 
键 ， 在 画面 中 单 击 并 选择 “ 旋 
转 90”, 按 'KBnter》> 链 第 
将 圆 角 和 矩形 移动 到 合适 位 置 ， 
利用 相似 方法 绘制 完整 刻度 ， 
如 图 国 团 转 所 示 。 

16 绘制 指针 单 击 工具 栏 中 的 
“ 圆 角 矩形 工具 ”按钮 ， 在 选 
项 栏 中 选择 工具 的 模式 为 “ 形 
状 ”， 设 置 填 充 为 绿色 (R: 
od Ga seu ml 语 几 国 
角 算 形 ， 再 次 单 击 “ 圆 角 矩形 
工具 ”按钮 ， 在 选项 栏 中 选择 
几时 he eR 
置 填 充 为 黄色 (R: 249，6G: 
94, B49D | 2 到 作 沸 形 ， 
如 图 苹 国 所 示 。 


1 7 绘制 椭圆 单 击 工 具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 
设置 填充 为 黑色 ， 绘 制 椭圆 ， 
如 图 国 国 所 示 。 
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帮主 膏 :| 不 透明 诬 : 


镶 定 : 。 中 四 填充: [100%| = ] 


二 
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局 平 化 手机 界面 的 设计 制作 


MAAel de 


@ 光盘 路 径 
Chapter12/Media 


Ln ee 
yl = 
加 图 


L TrA 一 一 四 

7 三 

ET | 昌 
中 和 寺 、 


1 4 半 下 
—— 


在 移动 设备 上 ， 过 于 复杂 的 效果 非但 很 少 能 吸引 用 户 ， 反 而 时 常 让 用 
户 在 视觉 上 产生 疲劳 ， 并 对 产品 界面 中 最 基本 的 功能 产生 认 知 上 的 障碍 。 
ss 因此 我 们 在 设计 中 就 需要 参考 “扁平 化 ”的 美学 。“ 扁 平 化 设计 ” 指 的 是 

抛弃 那些 已 经 流行 多 年 的 渐变 、 阴 影 、 高 光 等 拟 真 视觉 效果 ， 从 而 打造 出 
一 种 看 上 去 更 “ 平 ”的 界面 。 


ZN 


局 平 化 设计 风格 ， 更 专注 于 简约 、 实 用 。 局 平 风 格 的 最 大 一 个 优势 就 在 于 它 可 以 更 加 简 
单 直接 地 将 信息 和 事物 的 工作 方式 展示 出 来 ， 减 少 认 知 障碍 的 产生 。 


Ons 
Hlolmleln 
100% 的 私人 安全 


O 1 新 建文 件 执行 “文件 > 打 
开 ” 命 令 ， 在 弹出 的 “打开 ” 
对 话 框 中 ， 选 择 素材 文件 并 打 
开 ， 如 图 团 四 所 示 。 


铁定 : 图 of 中 看 。 填充 : [i009] =] 


-国生 
Liss 


6 友 回 心 自 避让 芝 


-280- 


2 绘制 云图 标 单 击 工具 栏 
中 的 钢笔 古旧 1 胺 向 咱 在 先 
项 栏 中 选择 工具 的 模式 为 “ 形 
A | ci oi Ay ET A I ee 
形状 ， 如 图 i 


OO3 添加 文字 单 击 工具 栏 中 的 

“ 横 厂 文字 工具 ”按钮 ， 在 选 

项 栏 中 分 别 设置 字体 为 Myriad 

prolAuiAdobe lei Sid 晤 刘 

oo sy 2 A a 

为 白色 ， 输 入 相应 文字 ， 如 图 
所 示 。 


〇 4 绘制 搜索 框 单 击 工具 栏 

i a 

项 栏 中 选择 工具 的 模式 为 “ 形 

a 0 ys fe 0 nd) 

绘制 窍 形 ， 设 置 图 层 的 不 透明 

度 分 别 为 50% 和 55%， 如 图 
所 示 。 


0 〇 5 绘制 搜索 图 标 单 击 工具 栏 
和 2 和 
ph he es 
OR a Eh A We Ey CR, 

24,G: 24，B: 24) ， 利 用 矢量 
工具 的 加 减法 绘制 完整 形状 ， 

如 图 Nii 


OO 添加 文字 单 击 工具 栏 中 

的 “ 横 版 文字 工具 ”按钮 ， 在 

选项 栏 中 设置 字体 为 Adobe 

体 Std， 字号 为 3.71 点 ， 颜 色 

py pe Ea RI A OQ a SB 

135) ,输入 相应 观 军 省 如 图 
is 


3) 
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~ 
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:35 
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Er 


上 加 of 中 看 SFE: [009]-] 


镇 定 : 加 of 中 面世 完 : [ioogl >] 


加 op) 时 期 六 , 3 月 25 晶 
LJ 


吧 | TT i0:35 


69 灰 回 四 加 什 
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:| 不 于 明度 : [100x| - ] 


馈 定 : 国 .w 中 四 填 斑 : 


® | | gg: - 


c 所 回合 四 奋 


| 正常 :| 不 透明 度 : mr 


争 定 : 四 of 中 看 。 其 充 : [100] = ] 


”i 
| v 转 


@ | jx 2 一 


9 所 回首 向 加 曾 
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(OO 7 绘制 矩形 单 击 工具 栏 中 的 ss ET 
“矩形 工具 ”按钮 ， 在 选项 栏 ER ee 的 人 
中 选择 工具 的 模式 为 “形状 ”， | | 
设置 填充 为 白色 ， 绘 制 矩形 。 
之 后 单 击 图 层面 板 下 方 的 “ 添 
加 图 层 样式 ”按钮 ， 在 弹出 的 
下 拉 菜 单 中 选择 “ 描 边 ”选项 ， 
设置 参数 ， 添 加 描 边 效果 ， 利 
用 相似 方法 绘制 其 他 效果 ， 如 
图 困 四 所 示 。 


0 〇 8 绘制 对 话 框 单 击 工具 栏 叶 10:35 
Na or a “a 
选项 栏 中 选择 工具 的 模式 为 I 二 

oo 0 0 a a a ys 
人 ECR eG a 
92) 和 白色， 分 别 绘制 矩形 ， 
如 图 困 因 所 示 。 


0 〇 9 导入 素材 执行 “文件 > 打 
开 ” 命 令 ， 在 弹出 的 “打开 ” 1 ”ny 
对 话 框 中 选择 素材 文件 打开 ， a 2 

将 其 拖 忠 至 场景 文件 中 ， 按 
Or eh es 
大 小 ， 移 动 到 合适 位 置 ， 按 下 
《Enter> 键 结束 操作 。 右 键 单 
击 图 层 ， 选 择 “创建 剪贴 蒙 版 ” 
选项 ， 添 加 文字 ， 利 用 相似 方 
法 绘制 其 他 效果 ， 如 图 国 
的 全 

1 0 绘制 滑动 条 单 击 工具 栏 中 3S 10:35 
的 “ 圆 角 矩形 工具 ”按钮 ， 在 ~ 
选项 栏 中 选择 工具 的 模式 为 “ 形 
状 ”, 分 别 设置 填充 为 灰色 (R: 
GO Ge ed hy td ed 
半径 为 10 像素 ， 分 别 绘制 圆 角 
矩形。 单 击 工具 栏 中 的 “和 矩形 
工具 ”按钮 ， 设 置 填充 为 绿色 
ORO Ge | A BD 
绘制 矩形 ， 如 图 困 园 所 示 。 
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1 1 绘制 矩 形 单 击 工具 栏 中 的 
“矩形 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 
放置 需 拖 为 自 色 多 绘制 十 形 ， 

设置 图 层 的 填充 为 30%， 如 图 
园 所 未 。 


-| 同 疝 谍 形 1 楼 册 ~ 
回 和 面 辐 


1 2 绘制 形状 单 击 工具 栏 中 的 
加 
Fi 4 hs gy HR 
设置 填充 为 白色 ,绘制 形状 。 

是 

按钮 ， 在 选项 栏 中 选择 工具 的 
2 a 
DA | eet OR BG rN 

117) ， 绘 制 和 矩形， 如 图 园 
有 i， 


和 3 绘制 形状 单 击 工具 栏 中 的 
0 年 适 关 入 
Fe I A eR 
设置 填充 为 蓝 色 (R; 63，6: 
82 BE Sa et 4 BtR, 
并 深 加 相 应 文字 ， 利 用 相似 方 
法 绘制 其 他 效果 ， 如 图 图 
a 


脸谱 网 登陆 
推 特 登 陆 


1 4 绘制 矩形 单 击 工具 栏 中 的 

“矩形 工具 ”按钮 ， 在 选项 栏 

中 选择 工具 的 模式 为 “形状 ”， 

绘制 形状 ， 设 置 图 层 的 填充 为 2。 

0, 单 击 “ 图 层 ” 面板 下 方 的 “ 添 KH): Gr 7 


位 置 (P): 外 部 ~ 
加 图 层 样 式 ” 按钮 ， 在 弹出 的 混合 模式 (BE) : 正常 v 
J a ew eben 
es 、 立交 尖 型 人 F) -二 企 推 特 登陆 
区 


用 相同 方法 绘制 完整 效果 ， 如 
独 贺 困 所 不。 
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3S 10:35 


l=| 


1 9 绘制 形状 单 击 工具 栏 中 的 人 10:35 
“钢笔 工具 ”按钮 ， 在 选项 栏 0 
中 选择 工具 的 模式 为 “形状 ”， 
设置 填充 为 和 白色， 绘制 形状 。 
单 击 工具 栏 中 的 “椭圆 工具 ” 
按钮 ， 在 选项 栏 中 选择 “ 减 去 
顶层 形状 ”选项 ， 绘 制 椭 圆 ， 
利用 相似 方法 绘制 其 他 效果 ， 
如 图 园 国 所 示 。 


脸谱 网 登陆 
推 特 登陆 


四 回国 加 日 


脸谱 网 登陆 
推 特 登陆 


16 绘制 形状 单 击 工具 栏 中 的 
“钢笔 工具 ”按钮 ， 在 选项 栏 
A 
设置 填充 为 白色 ,绘制 形状 ， 
设置 图 层 的 不 透明 度 为 70%。 
再 次 单 击 工具 栏 中 的 “钢笔 工 
上 其” 按钮， 在 选项 栏 中 选择 工 
具 风 神器 避 和 隐 次 训 唱 太 证 眶 
5 
0) ， 绘 制 形状 ， 并 添加 相应 文 mm 
字 ， 如 图 国 转 所 示 。 推 特 登 陆 


回国 攻占 


脸谱 网 登陆 
推 特 登陆 


100% 的 私人 安全 


17 绘制 缓冲 图 标 单 击 工 具 栏 
Ph LH 
在 选项 栏 中 选择 工具 的 模式 
为 计 代  f A  f, 
绘制 圆 角 和 矩形， 设置 图 层 的 
不 透明 度 为 70%， 利 用 相似 方 
法 绘制 其 他 效果 ， 如 图 图 
fan 
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脸谱 网 登陆 
推 特 登 陆 


0 ts 
到 回国 国 口 
100X 的 私人 安全 


脸谱 网 登陆 
推 特 登陆 


0 fs 
于 回国 加 口 
100X 的 私人 安全 
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18 更 多 效果 展示 更 多 效果 如 图 国 ~~ 四 所 示 。 


S10:35 
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y | a 


注 || - wp 
Sp Lorel peum Sor sil amel consecieiuer adgrscng eht. Aenean commodo lo eget 
Tclor. Lorem Psum dclor sn smet consectetuer sdipiscing lit Aenean commodo 
lu eg0 do Lorem psum doior sit amat. ConsecleUUer ddDSCnO elt Mreen 
commodo ligula eget dolor 


A Lisa 
SS 潮 谢 你 的 礼物 起 含 你 


@ RY 


MW 项 澳 你 的 礼物 .想念 人 
Ep 
ra 1 Tiffany 


谢谢 你 的 礼物 .想念 你 
a 


> I 
| Ds 
斤 


100% 的 私人 安全 


< Collection 


A 
; A 
月 


4 ~ 
RD [办 


Photoshop APP UI 设计 从 入 门 到 精通 


12.5 
UI 设计 师 必 读 ， 如 何 设 计 导 航 和 标签 栏 


标签 栏 是 界面 的 主要 展示 区 ， 也 是 设计 的 重点 。 根 据 界 面 的 不 同 功能 ， 和 常见 的 设计 方式 有 
以 下 几 种 : 

列表 视图 一 一 适用 于 目录 、 导 航 等 多 层级 的 界面 。 将 信息 一 级 级 的 收 起 ， 最 大 化 的 展示 分 
类 信息 。 分 层 视 图 一 一 利用 iPhone 本 身 独 有 的 特性 让 其 固定 ， 或 王 直 、 水 平 深 动 ， 节 省 空间 。 

WH oh a ,ss LAY A NN 
效 快速 的 信息 浏览 ， 注 重 排版 和 信息 整合 ; 
VS ro A Sn pes A As ns 
重 层 级 关系 和 操作 引导 。 

iPhone 拥 有 紧 人 致 的 尺寸 ， 目前 流行 的 
iPhone5 的 分 辨 率 为 1136X640，iPhone6 的 
Wm EAT OW ee HAS arf an i on 
可 以 完整 显示 HTML，XML 网 页 。 利 用 多 点 触摸 
可 以 六 生 跟 昌 面 诗人 台 二 样 的 网 页 浏览 体验 。 

(a a 区 | 
素 的 限制 ，Web 的 设计 需要 考虑 诸如 : 精简 布 
/| Ee Wa VD rN Dal re ks 
DAE WE 

(1) 对 原 有 信息 进行 整合 重组 ， 横 问 排 
列 、 避 免 分 栏 。 

(2) 动作 传感器 可 以 感应 用 户 横 握手 机 
时 目 动 转 为 横 屏 显示 ， 因 此 信息 排版 要 做 到 
Bb a, 

(3) 精简 、 精 简 、 再 精 稍 ! 在 小 小 的 显 
0 ee a 
页 面 只 需 展 示 核 心 功 能 ， 去 挥 不 必要 的 “ 设 
ba a 7 ral 
面 易 操作 、 浏 览 顺畅 。 
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(4) 功能 界面 
杀 守 i0S 的 交互 习惯 ,功能 界面 的 结构 通常 目 上 而 下 ， 分 别 是 导航 栏 、 标 签 栏 和 工具 栏 。 


iphones iphoneé6 


导航 栏 主要 显示 “当前 状态 ”“ 返 
回 ” “编辑 ”“ 设 置 ”等 基本 操作 。 


douban.fm 


| 


工具 栏 作为 热点 触摸 区 域 ， 用 来 展示 
主 菜 单 。 形 式 可 以 为 文字 、 图 标 、 图 标 + 文 
Nr 


党 13 冀 


本 章 主 要 收录 了 4 个 不 同 风格 的 手机 界面 ， 包括 Android、 
iOS、Windows Phone 等 不 同 操作 系统 的 手机 界面 。 通 过 对 本 章 
综合 案例 的 学 习 ， 不仅 能 对 综合 案例 有 一 个 整体 的 了 了 和解 ， 还 能 
演习 到 更 高 级 的 技术 。 


Android 寞 面 

iOS7 整体 界面 

Windows Phone 整体 界面 
极致 精简 手机 界面 

iOS7 系统 界面 设计 风格 


第 13 章 综合 案例 


@ 光盘 路 径 
Chapter 13/Media 


Android 系统 整体 界面 制作 


Keyword 窍 形 工 具 、 横 版 文字 工具 、 钢 笔 工 具 、 图 层 梓 式 


Androdgd 二 | 从 Dimouw 为 要 他 的 证 天 洒 可 作 未 统 川 岂可 咱 册 攀 荔 议 
备 ， 由 Google 和 开放 手持 设备 联盟 开发 。Android 系 统 最 急 由 安 迪 。 重 宾 
(Andy Rubin) 制作 ， 最 初 主要 文 持 手机 。 随 看 Android 系 统 的 发 展 ， 

Android 界 面 也 受到 了 大 家 的 喜爱 。 


WAS] 
CS4 CS5 CS6 CC 


Android 系 统 整体 界面 的 版 式 设 计 通 过 文字 图 形 的 空间 组 合 ， 表 达 出 和 谐 的 美 。 为 了 达 
到 最 佳 的 视觉 效 末 ， 设 计 者 反复 推 敬 整体 布局 的 合理 性 ， 使 浏览 者 有 一 个 流畅 的 视觉 体验 。 
Android 系 统 界面 不 仅 图 标 风格 统一 ， 整 体 蜡 色调 和 机 械 化 的 设计 也 表现 出 了 高 科技 的 氛围 ， 
设计 风格 条约 、 稳 重 ， 颜 色 鲜 明 ， 界 面 布 局 合理 。 


: 《 
( : 《 
《Text based Title : ( Text based Title : ( Text based Title 


《 Label H 《 Label 了 《 [区 =je =j| 
ME 


Set up my proflle Set up my profile 


2-Line List 2-Line List 
「 tex | tex 


Second item 


OO 1 新建 文件 执行 “文件 > 新 
时 
po a 
度 分 别 为 5000 X4850 像素 的 空 
a | 
按钮 结束 , 设 前 景色 为 灰色 (CR: 
Ba Ge BE ra ee hu 
捷 键 《Alt+Deletey> 填充 颜色 ， 
如 图 辆 贺 所 示 。 


| | 


Photoshop APP UI 设计 从 入 门 到 精通 


0 〇 2 绘制 矩形 单 击 工具 栏 中 的 
“站 形 横 上”” 按 包 ,| 在 这 咽 栏 
中 选择 工具 的 模式 为 “形状 ”， 
分 别 设置 填充 为 黑色 、 灰 色 (R: 
4 Ga A 0 AR 
分 列 绘 制 矩 形 ， 如 图 所 示 。 


0 〇 3 绘制 图 标 单 击 工具 栏 中 
的 “钢笔 工具 ”按钮 ， 在 选项 
栏 中 选择 工具 的 模式 为 “ 形 
状 ”， 设 置 填充 为 白色 ,绘制 
形状 。 单 击 “ 横 版 文字 工具 ” 
按钮 ， 在 选项 栏 中 设置 字体 为 
民 @ 世 国生 加 由 A a A 
RR G2 0A BOD, 
输入 文字 ， 利 用 相似 方法 绘制 
更 多 效果 ， 如 图 所 示 。 


( Text based Title 


《 Label 


〇 4 绘制 矩形 单 击 工具 栏 中 的 

“矩形 呈 居 ”按钮 ， 在 选项 栏 

oh ee 并 

绘制 矩形 。 单 击 图 层面 板 下 方 的 

“添加 图 层 样式 ”按钮 ， 在 弹出 

的 下 拉 菜单 中 选择 “渐变 过 加 ” ss 

选项 ， 设 置 参数 ， 添 加 渐变 辣 加 。。 大 号 z -nn 


\ 估 [4 可 :=[=[=Te 用 


( Text based Title 


《 Label 


不 透明 度 (P) : 本 下 
二 生计 7 证 
效 坟 ， 如 图 团 辆 所 未 。 We: | RA 
样式 (1L): 线性 v ， 山 | 与 图 层 对 齐 {I 
高 度 人) 言 
缩放 (S) 一 a 1 
加 四 
0 OQ 


-290- 


05 绘制 分 市 线 单 击 工具 栏 
Bo a i a 
Pp he ot 4 I ey hs A 
状 ”, 分 别 设置 填充 为 蓝 色 (R: 
mG Ws Be D2 90 Rn ae I 
p08 0 2 0 | 20 
滤 形 ， 并 添加 相应 文字 ， 如 图 
所 示 。 


6 绘制 矩形 单 击 工具 栏 中 的 
“和 窑 形 工具 ”按钮 ， 在 选项 栏 
设 管 填充 为 蓝 色 (CR: 51，6: 
em B22 O02 a 
次 单 击 工具 栏 中 的 “ 逢 形 工 
上 其 ”按钮 ， 在 选项 栏 中 选择 工 
电 L 
充 为 灰色 (R: 208, GCG: 208,B; 
208) ， 绘 制 矩 形 ， 如 图 
所 示 。 


OO 7 导入 素材 执行 “文件 > 打 
开 ” 命 令 , 在 弹出 的 “打开 ” 
对 话 框 中 ， 选 择 素材 文件 并 打 
开 ， 右 键 单 击 图 层 选择 “创建 
剪贴 蒙 版 ”选项 ， 利 用 相似 方 
法 ， 制 作 其 他 效果 ， 如 图 
所 示 。 


( Text Ba 
( Text based Title 


《 [el=]| 


《 二 已 忆 1 Titi 
4 


《 Label 
ME 
Set up my proflle 


A 


2-Line List 
| I tex 
Second item 


Second item 


B 


2-Line List 
| I 


Second item 


全 [=) 4 可 =j=;=: =,e 因 由 
( Text based Title 


《 [区 =|e =]| 
ME 
Set up my profile 


用 


2-Line List 
]「 t x 


Second item 


Second item 


B 


2-Line List 
| ]f t 


Second item 


第 13 章 


多 [=) 4 可 = 
( Text based Title 


《 [Te 


ME 


Set up my profile 


2-Line List 


《 xT DA ] Cit 


《 


《 


Text based Title 


Label 


ME 
Set up my profile 


A 
2-Line List 

me tex 
Second item 
Second item 


B 


2-Line List 


Second item 


Cc 


多 [=》4 可 三 [=!=i=:e 国 四 相 [ 


( Text based Title 


《 


Label 


ME 
Set up my profile 


A 


2-Line List 
| [ tex 
Second item 


Second item 


B 


2-Line List 


Second item 


二 全 
= 小 电 


案例 


Photoshop APP UI 设计 从 入 门 到 精通 


0 〇 8 绘制 矩形 单 击 工具 栏 中 的 
“和 矩形 工具 ”按钮 ， 在 选项 栏 


《Text Based Titl 


( Text based Title 
和 | 
p 《 [le =]| 
bo Ej Re a es 


G61WB:51D ,给 | 制 短 有形 ! setup my profile 
再 次 单 击 工具 栏 中 的 “矩形 工 
Ue er i ts la ee iT 


具 的 模式 为 “形状 ”， 分 别 设 


Second item 


Second item 


Ey Py RE: 08 0: - 
58290805 A fl Ru 3 2LineList 
G: 181,B: 229) ， 绘 制 矩形 ， 6 es 
如 图 oa - 


0 〇 9 给 制 形状 单 击 工具 栏 中 的 
“钢笔 工具 ”按钮 ， 在 选项 栏 


( Text Based Title : ( Text Based Title 


(Text basedTitie - ( Text based Title 
中 选择 工具 的 模式 为 “形状 ”， 
设置 填充 为 深 灰色 CR: 99，G: ~ ee 
98, Bll 98 en Set up my profile ee 
为 90%， 添 加 文字 ， 如 图 ; 
所 示 。 


10 绘制 矩形 单 击 工具 栏 中 的 
“ 知 形 工具 ”按钮 ， 在 选项 栏 
He LR 
绘制 矩形 。 执 行 “ 文 件 > 打开 ” 
TE a od 
框 中 ， 选 择 素材 文件 并 打开 ， 

右键 单 击 图 层 ， 选 择 “ 创 建 前 
贴 莹 版 ”选项 , 如 图 has 


上 
村 
下 
开 
REE 
~ 
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11 绘制 矩形 单 击 工具 栏 中 
nea a a 
poate hese sn py 
状 ”， 设 置 填充 为 黑色 ， 绘 制 
矩形 。 再 次 单 击 工 具 栏 中 的 “ 钢 
笔 工具 ”按钮 ， 在 选项 栏 中 选 
和 
置 填 充 为 灰色 (R: 139，6: 
oow Bs 3 0 2 Ns or ean 
图 Wi 


12 绘制 按钮 单 击 工 具 栏 中 的 
ab Pa er 
呈 2 丰 择 轩 J 二 为 形 沁 ?|， 
设置 填充 为 黑色 ,绘制 椭圆 ， 
设 管 图 层 的 填充 为 60%。 再 次 
Ge ar 
项 栏 踢 远 择 量 具 的 述 臣 网 和“ 形 
WR a En EC 
BO Ces OW 2 D2 
彬 圆 ， 如 图 而 站 


13 绘制 图 标 单 击 工具 栏 中 的 
Wp ea 丙 相 
Wa hm A so 
设置 填充 为 蓝 色 (R: 50，6: 
I8O, B28 
莹 图 层 的 填充 为 60%。 再 次 单 
着 天 
钮 ， 在 选项 栏 中 选择 工具 的 模 
式 为 “形状 ”, 设置 填充 为 白色 ， 
绘制 形状 ， 如 图 二 


| 
f 
| 
bl 
; 
WE 


. 
ype T_T ‘pon pum ‘pen 


有 
: 
下 
: 


Photoshop APP UI 设计 从 入 门 到 精通 


1 4 绘制 椭圆 单 击 工具 栏 中 的 
“椭圆 工具 ”按钮 ,在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 
设置 填充 为 白色 ， 利 用 矢量 工 
具 的 加 减法 绘制 圆 环 ， 再 次 单 
击 工具 栏 中 的 “钢笔 工具 ” 按 
钮 ， 在 选项 栏 中 选择 工具 的 模 
式 为 “形状 ”， 设 置 填充 为 绿 
EE REO Ge 2m OM 
形状 ， 如 图 园 园 所 示 ，。 


15 绘制 图 标 单 击 工具 栏 中 的 
0a a 
和 
设置 填充 为 蓝 色 (R: 50，6: 
LS OB 2 2 
置 图 层 的 填充 为 60%。 再 次 单 
3 
钮 ， 在 选项 栏 中 选择 工具 的 模 
穆 为 if 形状 i 充电 吉 充 为 四 人 色 ， 
绘制 形状 ， 如 图 Wo 
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第 13 章 综合 案例 


@ 光盘 路 径 
Chapter13/Media 


苹果 iOS 8 系统 整体 界面 制作 


和 i0S8 系 统 相 比 于 之 前 的 10S 在 界面 呈现 方式 上 做 了 全 面 的 改变 ， 包 括 
、2%.9 采用 了 新 风格 的 锁 屏 界面 ， 具 有 快捷 功能 键 和 部 分 设置 选项 的 全 新 下 拉 通 
知 栏 、 动 态 的 天 气 界面 、 全 新 风格 的 拨号 盘 和 炫丽 的 多 任务 切换 界面 等 。 


Version 
CS4 CS5 CS6 CC 


i0S8 比 以 前 的 系统 更 扁平 化 ， 采 用 了 全 新 的 图 标 界面 设计 和 滑动 解锁 功能 ，i0S8 的 确 
颠覆 了 系统 以 往 的 设计 风格 ， 更 扁平 化 的 图 标 设计 、 更 简洁 的 界面 设计 都 给 我 们 带 来 别 样 之 
感 。 主 界面 大 变样 ， 更 趋 于 平面 化 ， 更 注重 细节 ，i0S8 几 乎 所 有 界面 都 经 过 了 重新 设计 ， 并 
且 延 续 了 简洁 的 设计 风格 。 


MP MUsll 
DOWNEOAD 


O1 新 建文 件 执行 “文件 > 新 
建 ” 命 令 ， 在 弹出 的 “新 建 ” 
对 话 框 中 ， 新 建 一 个 宽度 和 高 
上 度 分 别 为 720X1280 像素 的 空 
白文 档 ， 完 成 后 单 击 “确定 ” 
按钮 结束 ， 如 图 团 四 所 示 。 


Photoshop APP Ul 设计 从 入 门 到 精通 


0 〇 2 打开 文件 执行 “文件 > 
,ee ep eh A 
开 ” 对 话 框 中 选择 素材 文件 并 
ee en a I Oar lil > a 
合 键 目 由 变换 素材 图 像 大 小 ， 
将 取材 移动 到 合适 位 置 ， 按 下 
<Enter>》 键 结束 操作 ， 如 图 辆 
四 上 所 示 。 


0 〇 3 添加 照片 淹 镜 单 击 “ 图 
层 ” 面 板 下 方 的 “添加 新 的 填 
宛 或 调整 图 层 ” 按 钮 ， 在 弹出 
的 下 拉 快 捷 菜 单 中 选择 “照片 
WR ee ty 
对 话 框 中 设置 滤 镜 为 黄 ， 浓 度 “| 呵 人 明度 
为 40%, 为 背景 素材 添加 黄色 ， 
如 图 园 因 所 示 。 


〇 4 绘制 上 标 单 击 工 具 栏 中 的 
“矩形 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 
设置 填充 为 黑色 ， 在 画面 顶部 
绘制 矩形 ， 如 图 加 四 所 示 。 


Le 所 、 回 是 大 国 证 
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(05 绘制 信号 图 标 单 击 工具 栏 
i 
项 柱 中 D6 所] A 
WR Ne i dt 4 WR EE IR: 
seg eae nad ny ean eT 
i a 
A Sa et rs 
i a WN oe ih, 
在 三 角形 劳 边 绘制 三 个 梯形 ， 
如 图 国 四 所 示 。 


0 〇 6 绘制 电池 图 标 单 击 工具 栏 
A 0 a 
项 位 中 选择 工具 的 模式 为 “ 形 
ON | sa HA Ss fa KR: 
NAG G22 BO 
图 标 右 侧 绘 制 矩 形 。 再 次 单 击 
“和 沧 形 工具 ”按钮 ， 在 选项 栏 
中 选择 “合并 形状 ”选项 ， 在 
画面 中 绘制 矩形 ， 完 成 后 添加 
相应 文字 ， 如 图 园 因 所 示 。 


(OO / 绘制 播放 按钮 单 击 工具 栏 
中 的 “椭圆 工具 ”按钮 ， 在 选 
项 栏 中 选择 工具 的 模式 为 “ 形 
状 ”， 设 置 填充 为 白色 ， 在 画 
面 中 央 绘 制 正 圆 。 再 次 单 击 “ 椭 
圆 工 具 ” 按 钮 ， 在 选项 栏 中 选 
拌 “ 减 去 顶层 形状 ”选项 ， 在 
画面 中 绘制 同心 圆 。 单 击 “ 多 
边 形 工具 ”按钮 ， 在 选项 栏 中 
路 看 通 网 民 川 硕 a ean 
复 选 框 , 选择 “合并 形状 ”选项 ， 
在 画面 中 绘制 三 角形 ， 如 图 国 


图 扩 未 。 


Photoshop APP UI 设计 从 入 门 到 精通 


wr z 直 区 “12:03 
(0 〇 8 绘制 悬浮 旋钮 新 建 图 层 ， | 
催 置 图 层 的 填充 为 25%， 单 击 国 : 


工具 栏 中 的 “椭圆 工具 ”按钮 ， 
在 选项 栏 中 选择 工具 的 模式 为 
“形状 ”， 设 置 填充 为 白色 ， | og J 
绘制 正 圆 。 再 次 单 击 工具 栏 中 i ls A 

的 “椭圆 工具 ”按钮 ， 在 选项 
栏 中 选择 “ 减 去 顶层 形状 ”， 
在 画面 中 绘制 同心 圆 。 单 击 “ 和 矩 
形 工具 ”按钮 ， 在 选项 栏 中 选 
择 “ 减 去 顶层 形状 ”选项 ， 在 
画面 中 绘制 “+” 号 形状 ， 如 图 
四 所 示 。 


〇 9 最 终 效果 利用 相似 的 矢量 
工具 加 减法 绘制 更 多 图 标 ， 之 
后 利用 “ 横 版 文字 工具 ”在 画 
面 上 方 输入 相应 文字 ， 完 成 最 
终 效果 ， 如 图 国 因 所 示 。 


10 更 多 效果 利用 相似 方法 绘制 更 多 效果 ， 如 图 四 团 团 所 示 。 


各 OFARCH The Bourne Ultimatum 
Six Weeks Ago 

| 

| Songs, Artist or Album CQ 
Baby 
Justin Bieber 04.20 
Fur Elise 
Ludwing van Beethoven 0250 


Super Mario Bros, Theme 


Koji Kondo 04.20 
a 
| Baby 
Justin Bieber 04.20 
pm Ee SE a 了 
| © poker Fac@ | 
| Lady Gaga 05.00 
PE 
O@) Baby 
| Justin Bieber 04.20 


} ~ Dabar Cann~ 19| 
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@ 光盘 路 径 
Chapter13/Media 


Windows Phone 系统 整体 界面 制作 


矩形 工具 、 横 版 文字 工具 、 钢 笔 


本 Windows Phone 力 图 打破 人 们 与 信息 和 应 用 之 间 的 隔 图 ， 提 供 适 用 于 
人 们 工作 和 娱乐 等 方方面面 的 最 优秀 的 问 到 端 体验 ， 并 提供 多 种 个 性 化 定 
制服 务 。Windows Phone 在 视觉 效果 方面 给 入 一 种 号 临 其 境 的 感觉 ， 让 人 
们 可 以 随时 随地 圣 受 到 想 要 的 体验 。 


Version 
CS4 CS5 CS6 CC 


Windows Phone 上 其 有 果 和 面 定制 、 图 标 拖 搜 、 滑 动 控 制 等 一 系列 前 卫 的 操作 体验 。 其 主屏 硕 
WO ep er py 息 信 、 未 接 来 电 、 日 历 、 约 会 等 ， 让 人 们 
对 重要 信息 你 持 时 刻 更 新 。 


Revenue Revenue 


alalalolnll +142 


9,362.74 6,734.89 


O1 新 建文 件 执行 “文件 > 
7 Ee 
建 ” 对 话 杠 中， 新建 一 个 宽度 
和 高 度 分 别 为 5000X4850 像 
国富 a 人 
“人 确定” 按 人 饥 结 束 操作 。 

前 景色 为 灰色 (R: 234，6: ， 
2 2 = we 
《Alt+Delete> 填充 颜色 ， 如 图 
加 所 示 。 


三 ”| 


Photoshop APP UI 设计 从 入 门 到 精通 


0 〇 2 绘制 背景 单 击 工具 栏 中 的 
“ 圆 角 矩形 工具 ”按钮 ， 在 选 
项 栏 中 选择 工具 的 模式 为 “ 形 
a A A a Et 
为 5 像素， 绘制 圆 角 和 矩形 ， 单 
南 “ 赴 形 炎 具 ” 按 和 钮 ,在 选项 
he 0 
状 川 省 访 午 上 晨 苑 为 绿色 CR: 
2 Ou ee Ou se 20 le al) 
定形 ， 如 图 国 贺 所 示 。 


〇 3 绘制 分 割 线 单 击 工具 栏 
中 的 “钢笔 工具 ”按钮 ， 在 选 
项 栏 中 选择 工具 的 模式 为 “ 形 
A ba A sl hia lp, 
颜色 为 黑色 ， 选 择 虚 线 绘制 直 
线 。 再 次 单 击 “ 钢 笔 工具 ”按钮 ， 
在 选项 栏 中 选择 工具 的 模式 为 
形状 ”， 设置 填充 为 黑色 ， 
描 边 为 无 ， 绘 制 直线 ， 设 置 所 
有 图 层 的 填充 为 20%， 如 图 因 
因 所 未 。 


〇 4 绘制 走势 图 单 击 工具 栏 Revenue 
A a 
DO teh po hy da A ES 
状 ”， 设 管 填 充 为 白色 ， 绘 制 
形状 ， 单 击 “ 横 版 文字 工具 ” 
按钮 ， 在 选项 栏 中 设置 字体 为 
My nia hl oo ee 
18 点 ， 颜 色 为 白色 ， 输 入 相应 
文字 ， 如 图 园 加 所 示 。 


Le 0 


0 〇 5 绘制 背景 单 击 工具 栏 中 的 
“ 圆 角 和 矩形 工具 ”按钮 ， 在 选 
项 栏 中 选择 工具 的 模式 为 “ 形 
状 ”, 分别 设置 填充 为 灰色 (R: 
Ba oe pa es 
(RE (ZOW | HC OW Be aN 

半径 为 2 像素 ， 绘 制 圆 角 和 矩形 ， 
添加 文字 ， 如 图 国 四 所 示 。 


OO 绘制 背景 单 击 工具 栏 中 的 
WD 
二 
设置 填充 为 和 白色， 绘制 矩形 。 

i Ss 
fh kd TE ha A 
状 ”， 设 置 填充 为 深 灰 色 (R: 

中 0 
如 图 国 因 毛 示 . 


OO / 绘制 下 标 单 击 工具 栏 中 的 
“定形 开具” 按钮， 在 选项 栏 
2d NU a A Te , 
分 别 设置 填充 为 白色 、 灰色 (R 
BOA Gea ess a 
形 。 单 击 工具 栏 中 的 “钢笔 工 
具 ” 按 钮 ， 在 选项 栏 中 选择 工 
3 a 
pi A Ce OR N20 0. | LBB 

214) ， 绘 制 形状 ， 添 加 文字 ， 

如 图 固 园 所 示 。 


Revenue 


yl! 
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Revenue 


alalllnll +142 


9,362.74 


6,734.89 


(8 绘制 进程 图 标 单 击 工具 栏 
EE 0 Pe 
Dh eh ok dD Ny a i yy AE 
A Et Ge a IR: 

20, Ce Ss a 册 人 生 有 
轩辕 
其” 按钮， 在 选项 栏 中 选择 工 
有 共 的 模式 为 “路 径 ”, 绘制 路 径 ， 
将 路 径 转化 为 选区 ， 单 击 “ 图 
J ey a WR 
厂 ” 投 钮 ， 添 加 蒙 版 ， 遮 挡 不 
需要 的 部 分 ， 如 图 困 国 所 示 。 


(OO9 给 制 进程 图 标 单 击 工具 栏 
中 的 “椭圆 工具 ”按钮 ， 在 选 
Dh i Ly oi yy NS 
A es El Ge A eR 

m0 Ge GO ,lel 
圆 。 单 击 工 具 栏 中 的 “ 横 版 文 
学 了 工具” 按钮 ,在 选项 栏 中 设 
面 守 Senika | 呈 分 别 
A GO DA sm ea 
2 wif OR ZA GDA BL 

243) ， 输 入 相应 文字 ， 如 图 
恩 上 所 示 . 


Photoshop APP Ul 设计 从 入 门 到 精通 


CHAR 


和 
_HAR 


I 


10 更 多 效果 利用 相似 方法 绘制 更 多 效果 ， 如 图 因 所 示 。 


Tasks Completed 


到 


上 人] 


9,362.74 


6,734.89 


January 25, 2013 


加 ITERFELL BB 9 
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D ts 


Time is Money! + 


Ed 
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极致 精简 界面 的 设计 制作 。 


Section | 
1 3 4 Keyword “和 珑 形 工具 、 横 版 文字 工具 、 钢 笔 工具 、 椭 圆 工具 、 图 层 样式 
简洁 、 易 用 、 友 好 、 直 观 ， 这 些 词语 在 设计 中 经 常 被 提 及 ， 但 在 执行 
@ 过 程 中 却 经 常 被 遗 愁 ， 这 是 软件 功能 的 复杂 性 导致 的 。 能 人 否 处 理 好 软件 的 
。 复杂 功能 往往 就 可 以 决定 它 的 命运 。 一 个 复杂 的 界面 会 让 用 户 不 知 如 何 操 
作 ， 如 采 减 少 复 杂 的 操作 过 程 并 精简 操作 界面 ， 那 该 软件 的 用 户 体验 就 大 
pd oh 


Ta 


本 例 征 极致 精简 界面 的 制作 ， 其 目的 是 制作 简洁 、 易 用 的 界面 。 设 计 师 采用 蓝 案 色 和 日 
色 两 个 主 色调 ， 通 过 所 有 界面 风格 的 一 致 性 ， 达 到 了 简 涪 的 效 末 。 界 面 上 局 平 化 又 不 失 精 致 
Ee a as 


图 ”Nowplaying:s899FM ”图 OO Nowplaying:88.99FM 


OO1 新 建文 件 执行 “文件 > 新 
建 ” 命 令 ， 在 弹出 的 “新 建 ” 
对 话 框 中 ， 新 建 一 个 宽度 和 高 
上 度 分 别 为 1280X1920 像素 的 


3 
a a 
面板 下 方 的 “添加 图 层 样式 ” 
按钮 ， 在 弹出 的 下 拉 菜 单 中 选 
择 “ 渐 变 登 加 ”选项 ， 设 置 参 
数 ， 添 加 渐变 硬 加 效果 ， 如 图 
为 所 示 。 


- 渐变 和 二 加 
渐变 
源 合 楼 式 (0) : 正常 v 回信 和 色 
不 透明 度 (P): cy 区 辐 % 

wx: | Da 


样式 (L) : ”线性 ” 与 图 层 对 齐 (I) 


旬 度 (N): [| 50 一度 
人 


妨 放 人 (S) : 一 一 一 一 一 ~ 100 多 


| | 
R: 134 
a 下 下 
B: 234 


0 〇 2 绘制 矩形 单 击 工具 栏 中 的 
1 十 靓 山 是 | 接 杀 川 古村 项 栏 
FH 2 4 tn A |, 
设置 填充 为 蓝 色 (R: 93，6G: 

加 号 四 4 
Eh 
FO | | a mrss a Te I 
| me hE A Ma GAD CR. 

OIC sr Be sD 2 
光斑 ， 如 图 国 加 所 示 。 


0 〇 3 绘制 上 标 单 击 工具 栏 中 的 
1 起 月 硬 局 几 静 齐 几 全 让 硕 从 
Pat de I om A 
设置 填充 为 蓝 色 (R: 116， 

GGONB: UBD 2 

3 a A 
Dh es tl pa I ey a a pA 
状 ”, 设置 圳 死 为 和 白色， 绘制 
形状 ， 如 图 国 国 所 示 。 


〇 4 添加 描 边 单 击 “ 图 层 ” 面 
板 下 方 的 “添加 图 层 样 式 ” 按 
饥 , 在 弹出 的 下 拉 某 单 中 选 
择 “ 朱 边 ” 克 项 ,设置 参 数 ， 
添加 摘 边 和 文字 ， 如 图 园 四 
Dy 


Photoshop APP Ul 设计 从 入 门 到 精通 


- 描 边 


千 构 
大 小 (5) :< 一 1 像素 
位 置 (P): 外 部 v 

混合 模式 (B) : 正常 本 


不 透明 度 (D) : AT 


多 


 ” 境 充 类 型 (F): 翅 色 v 


= R29 
| 
B: 253 


0 


0 〇 5 绘制 上 标 单 击 工具 栏 中 的 

WS 2 WM i 
pi de I Fh A SW, 
议 置 坊 充 为 监 色 (R:107， 
GA Be sit 
a 
在 选项 栏 中 选择 工具 的 模式 为 
“形状 ”， 设 置 填充 为 蓝 色 (R: 
Bo Gu 2B A A 
10 像素 ， 绘 制 圆 角 和 矩形， 如 图 
四 四 睫 示 . 


0 〇 6 添加 图 案 权 加 单 击 工具 栏 
a es a 
在 选项 栏 中 选择 工具 的 模式 为 
Sn A a 
半径 为 10 像素 , 绘制 圆 角 矩形， 
单 击 “图 层 ” 面 板 下 方 的 “ 添 
加 图 层 样式 ”按钮 ， 在 弹出 的 
下 拉 采 单 中 选择 “图 案 和 加 ” 
选项 ， 设 置 参数 ， 添 加 图 案 笃 
加 效果 ， 如 图 国 因 所 示 。 


〇 了 绘制 图标 单 击 工 具 栏 中 的 
“椭圆 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 
设置 填充 为 白色 ,绘制 椭圆 。 
单 击 工具 栏 中 的 “钢笔 工具 ” 
按钮 ， 在 选项 栏 中 选择 工具 的 
模式 为 “形状 ”， 设 置 填充 为 
白色 ， 绘 制 形状 ， 如 图 因 
所 示 。 


. 图 案 登 加 
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国泰 


汤 合 模式 (5B) : ”正常 - 
不 透明 度 (Y) : Cp 6 % 


Photoshop APP UI 设计 从 入 门 到 精通 


0 〇 8 绘制 下 标 单 击 工具 栏 中 的 
“起 形 丰 具 ?” 按 乌 ,| 在 选 吊 往 
ow 3 
议和 名 迪 | 充 为 星人 色 ICR:|IL07， 
(os A Be Dy 过 辣 因 
Be | Bh tl | er 
项 栏 中 选择 机 具 的 模 武 为“ 形 
状 ”， 设 置 填 充 为 白色 ， 绘 制 
形状 ， 如 图 国 四 所 示 。 


〇 9 给 制 椭圆 单 击 工具 栏 中 的 

“椭圆 工具 ”按钮 ， 在 选项 栏 
中 选择 工具 的 模式 为 “形状 ”， 
绘制 椭圆 ， 设 置 图 层 的 填充 为 
0。 单 击 “ 图 层 ” 面 板 下 方 的 
“添加 图 层 样式 ”按钮 ， 在 弹 
出 的 下 拉 菜 单 中 选择 “ 描 边 ” 
和 “内 发 光 ” 选 项 ， 设 置 参数 ， 
添加 描 边 和 内 发 光 效果 ， 如 图 
因 所 示 。 


1410 添加 外 发 光 单 击 “ 图 层 ” 
面板 下 方 的 “添加 图 层 样 式 ” 
按钮 ， 在 弹出 的 下 拉 菜单 中 先 
择 “ 外 发 光 ” 选 项 ， 设 置 参 数 ， 
添加 外 发 光 ， 利 用 相似 方法 绘 
制 其 他 效果 ， 如 图 团 团 所 示 。 


大 小 (5) : ey 一 ==» 24 价 素 
位 置 (P): 外 部 v 

源 合 楼 式 (B) : 正常 - 

不 透明 度 (0): epg 13  % 


境 充 类 型 (F): 谣 色 vv 


RS 251 
Be 本 
. 内 发 光 
每 构 
混合 模式 (6) : 正常 = 


不 透明 度 (0) : eye 20  % 
杂 色 (N) : [0 % 


© 国 © or | 


R222 


国家 8230 
方法 (人 人: 和 柔和 v 
源 : 回 后 中 全 ) 。 @) 边缘 (6) 


阻塞 (C) : Jo % 
大 小 (5) : ee 27 | 像素 


- 外 发 光 


混合 模式 (E) : 
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1 1 绘制 椭圆 单 击 工 具 栏 中 的 SO Nowplaying:88.99FM 
“椭圆 工具 ”按钮 ， 在 选项 栏 
由 hs A Fo 
绘制 椭圆 ， 设 置 图 层 的 填充 为 
0。 单 击 “ 图 层 ” 面板 下 方 的 “ 添 
Wo et oe 
下 拉 采 单 中 选择 “ 描 边 ”选项 ， ee ee 
设置 参数 ， 添 加 描 边 ， 利 用 同 位 置 (FE): 外 部 : 
样 的 方法 绘制 其 他 效果 ， 如 图 。 3”: = 


不 透明 度 (0) rr 100  % 


国 上 所 示 。 一 填充 类 型 (F) : 强 色 


12 添加 文字 单 击 工具 栏 中 
的 “ 横 版 文字 工具 ”按钮 ， 
在 选项 栏 中 选择 设置 字体 为 
Pine sy sb, A ea wt 
色 分 别 为 白色 、 浅 蓝 色 (R: 
Don) Ge OB yr 
相应 文字 ， 如 图 园 园 所 示 。 


1 3 打开 文件 执行 “文件 > 打 © Now playing : Unknown track 
开 ” 命 令 ， 在 弹出 的 “打开 ” 
ee a 
开 ， 如 图 困 图 所 未 。 


a 
ue: 国 /4 a me Fa 


-HI 
LJ 


ebp 
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下 4 添 吉 描 边 单 击 工具 栏 中 的 Yt 
“椭圆 工具 ”按钮 ， 在 选项 栏 

Et 32 A | 
设置 填充 为 蓝 色 (R: 134，6G: 
179,B: 204) ， 绘 制 椭 圆 。 单 

击 “图 层 ” 面 板 下 方 的 “添加 。 ss， 
图 层 样 式 ” 按 钮 ， 在 弹出 的 下 天 小 (8) :eo [5 你 
拉 末 单 中 选择 “ 描 边 ”选项 ， ei E 2 
设置 参数 ， 添 加 描 边 ， 利 用 相 。 +s&0: 一 
同方 法 绘制 更 多 效果 ， 如 图 困 一 sx#am: se - 
轩 所 不。 六 


| 


1 D 绘制 图 标 单 击 工 具 栏 中 的 © Now piayng: unknown track NO ra 
多 
0 
设置 填充 为 白色 ， 绘 制 形 状 ， 
利用 相同 方法 绘制 更 多 效果 ， 
如 图 国 国 所 示 。 


16 玻 制 沽 形 单 击 工具 栏 中 的 下 -生生 人 
窍 形 工 具 ” 按 钮 ， 在 选项 栏 中 
5 Us A 
设置 填充 为 日 色 , 绘制 答 形 ， 
里 击 工 具 栏 中 的 “ 横 版 文字 工 
具 ” 按 钮 ， 在 选项 栏 中 设置 字 
体现 | 几 eIRaoeallINeuelBeauuy 
字号 为 30 点 ， 颜 色 为 白色 ， 输 
入 相应 文字 ， 如 图 图 国 所 示 。 
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1 7 绘制 矩形 单 击 工具 栏 中 的 
矩形 工具 ”按钮 ， 在 选项 栏 中 
Po de I Eh he Ap SR 
设置 填充 为 蓝 色 (R: 116，6: 
hoou Bu lS ,2 Rr 
击 工具 栏 中 的 钢笔 工具 ” 按 
钮 ， 在 选项 栏 中 选择 工具 的 模 
By Ry a i he gi 
色 ， 绘 制 形状 ， 之 后 利用 相同 
方法 绘制 更 多 效果 ， 如 图 图 
转 所 示 。 


1 8 绘制 进度 条 利用 上 述 方法 
绘制 按钮 图 标 ， 单 击 工具 栏 中 
的 矩形 开具 ?按钮 ， 在 选项 栏 
ml a 
Ww i wR a CR 2 
人 
lB el Om 2 ee) 
窍 形 ， 添 加 相应 文字 ， 如 图 图 
七 所 未。 


19 最 终 效果 利用 相似 方法 绘 
制 更 多 效果 ， 如 图 国 国 所 示 。 


Now playing : Unknown track 
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> > i 
PR AR FRR 
| Te 有 ye 二 和 人 ,| 
\ \ yy J \e > ee py 由 
多 人 Ey 


© Now playing : Unknown track 


I IIIIIIII SO 


A Ce i 
PR ES | 
高 入、 a p> ~ n 全 
~ A 4 
Ne 多 QC 网 ey 
Now playing : Unknown track by John Doe 


Now playing : Unknown track by John Doe 
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Phaylist 


志 


Hecords 


AMlburms 


df 


人 所 站 外 TGS 


IRadio 


Settings 


Player 


More 


Voice memo 


Blell/nl el: le Eel lol 
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13.5 
UI 设计 师 必 读 : iOS 8 系统 的 设计 风格 


自从 WWDC 大 会 10S 8 系统 问世 以 来 ， 对 i0S 8 与 10S$ 之 前 系统 所 拥有 的 堪 称 “翻天 履 地 ”的 变 
人 
格 在 表面 上 融 来 了 与 之 前 全 然 不 同 的 稍 约 风格 ， 但 是 i0S 8 整个 系统 在 设计 理念 、 设 计 风 格 和 系 
SD NE re a ES AS Essy 
J A dy 4 


eeeee 中 国电 信 全 17:44 [_h 


OPA 


信息 日 历 邮件 天 气 


eeeee 中 国电 信 全 i 


和 


全 公公 
PG BD A 
Do 


视频 、 ”备忘录 


8 
ce 
Vv ER 
宁 
AA Ee 
全 4 


提醒 事项 股市 Game Center Passbook 


olokEle 


1 
iTunes Store App Store 设置 
昌 


i0S 8 的 界面 设计 


13.5.1 扁平 风格 


i0S| 8 的 程序 及 图 标 个 仅 变 得 
更 加 简洁 扁平 化 ， 而 且 新 用 户 界 面 
对 外 部 复杂 环境 的 适应 能 力也 极 大 
增强 了 。 比 如 i0S 8 系统 不 仅 有 根 
据 用 户 的 时 差 角 上 度 调 整 界面 的 加 速 
7 订 川 果 合 用语 潜 典 怀 访 利 几 
手机 内 置 的 光线 感应 仪 让 图 标 和 和 硼 
景 上 自动 适应 不 同 的 光线 强度 ， 在 控 
制 面板 的 文本 和 色彩 的 同时 也 能 够 
按照 主题 背景 图 片 的 色彩 自动 进行 
调整 。 
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13.5.2 细节 刻画 


相对 i0S 之 前 版 本 而 言 ，i0S 8 整个 系统 的 图 标 和 应 用 的 细节 被 简化 ， 但 是 其 所 处 的 系统 底 
层 却 变 得 更 加 复杂 。 我 们 发 现 ，i0S 8 的 新 图 标 和 文本 不 仅 不 在 共用 单一 的 图 标 按钮 之 内 ， 并 且 
它 新 采用 的 Helvetica Neue Ultra Light 字 体 也 被 直接 显示 在 屏幕 上 。 这 样 一 来 ， 看 上 去 更 加 
简洁 直观 。 但 是 由 于 图 形 不 能 以 按钮 作为 基准 位 置 ， 而 是 要 帮助 用 户 定位 漂浮 在 空间 中 的 文本 ， 
所 以 在 图 形 设计 方面 ， 面 临 着 很 大 的 
挑战 。 

另外 ，i0S 8 系统 的 屏幕 本 身 也 呈 
现 出 一 种 图 像 密集 多 层 化 效果 。 我 们 从 
上 面 分 解 的 三 维 投影 图 上 可 以 看 到 三 个 
非常 清晰 的 层次 。 底 层 是 背景 图 片 ， 中 
间 层 是 应 用 程序 ， 顶 层 是 控制 中 心 的 背 
景 ， 具 有 模糊 效果 的 面板 层 。 设 计 师 认 
为 ， 多 层 的 设计 将 会 给 用 户 带 来 一 种 新 
的 质感 和 新 的 体验 。 


The mobile OSfrom a 
whole new perspective. 


13. 5.3 ”文字 效果 


OS BA Sy en ee a ee | | es | 
Ultra _ Light 字体 是 原来 10S 标 准 字 体 Helvetica ER - 一 
Neue 的 瘦身 版 ，Neue 字 体 也 是 Helvetica 字 体 work beautifully, 

和 变 体 Ultra Light 成 为 计算 机 时 代 的 经 典 字 ” ittends to ook 
体 。 在 10S 系 统 中 ， 干 净 和 优雅 是 Neue 字 体 的 代 。 thatway'too 
Wu te 

NE ea kn eddy den HE 
fA (se SA sD a 
Light 字 体 很 难 辨 识 。 要 是 10S 没 有 了 字体 曾经 放 ”~ HHAIFG 一 党 ze 
置 的 边框 和 背景 ， 其 就 显得 很 上 暗淡。 也 束 是 说 ， 
模糊 背景 下 ， 这 种 字体 很 漂亮 ， 要 是 用 户 更 换 了 
背景 ,字体 效果 就 变 得 很 糟 料 。 i0S 8 的 字体 设计 


of Headline 1 Short (40pt) 


Leading of Subhead 2 


13.5.4 界面 效果 变化 大 


从 表面 由 看 OW BA Se A ip eR a 
标 放 弃 了 之 前 非常 具有 质感 的 偏 并 体 设 计 ， 而 采用 了 “局 平 化 ”人 简 滞 十 汉 的 设计 风格 。 有 的 人 
说 ， 平 末 正 在 问 微 软 Windows Phone 系 统 风格 徘 扰 ， 因 为 翌 果 放弃 使 用 原本 的 skeuomorphic 风 \ 
格 ， 而 开始 进行 平面 化 图 标 设计 风格 。 

US, | 0 O88 A A To rR a A SU 人 
了 苹果 之 前 的 拟 物 化 设计 ， 减 少 了 许多 装饰 。 总 而 言 之 ， 苹 果 公 司 的 审美 观 正在 发 生变 化 。 
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。 Photoshop 人 物 照片 精 修 大 揭秘 。 Photoshop 人 像 提 影 与 后 期 处 理 精 粹 
全 彩 /69.90 元 全 彩 /69.90 元 


$AutoCAD 2014 AutoCAD 2014 
从 入 门 到 精通 电气 没 计 信和 到 着 “ 


实战 案 | 
\ Bs 
py 


ra 
7 
ao 
- 


， 中 文 版 AutoCAD 2014 从 入 门 到 精通 :中文 版 utoCAD 2014 机 械 设计 从 
实战 案例 版 《第 2 版 ) 入 门 到 精通 《实战 案例 版 ) 


彩 插 + 黑白 /75.00 元 彩 插 + 黑 旦 /65.00 元 


$AutoCAD 2014 
机 械 设 计 入 站 到 


中 文 版 AutoCAD 2014 室 内 装潢 中文 版 AutoCAD 2014 电 气 设计 
' 从 入 门 到 精通 实战 案例 版 从 入 门 到 精通 (实战 案例 版 ) 


:” 彩 插 + 黑 白 /65:00 元 彩 插 + 黑 白 /65:00 元 


SC Co da 


在 线 互动 交流 平台 
< / “| 官方 微 博 : http://weibo.com/cmpjsj 
SN [re 


a mw 
i ~ 


; Z > 和 


”本 书 首先 介绍 了 智能 手机 UI 的 基本 概念 和 知识 ， 让 读者 快速 掌握 基本 用 法 ; 
， 之后， 利用 大 量 精彩 小 案例 详解 了 智能 手机 Ul 各 个 模块 的 设计 方法 ; 最 后 按照 不 同 

| 手机 类 型 分 别 展示 了 相应 领域 的 总 体 Ul 设计 案例 。 
| 


不 同系 统 环境 下 的 APP UI 设计 思路 ， 你 知道 吗 ? 
GE 紧 闫 摆 放 控件 的 同时 考虑 手指 不 能 一 下 碰 触 好 几 个 控件 的 现状 。 
全 素 涝 通 怠 不 要 用 太 多 大 容量 素材 ， 避 免 降 低 啊 应 时 间 ， 看 得 清楚 和 舒服 即 可 。 
全 时 昌 可 一 不同 品牌 型 号 的 手机 各 有 规定 ， 必 须 按 各自 系 统 尺 寸 定制 和 设计 Ul。 
CGE 苹果 偏 扁平 化 ， 安 卓 偏 三 维 风格 ，WP 则 为 多 格 布局 。 

OE 如 不 同 操作 系统 按钮 菜单 的 用 法 和 位 置 都 不 一 样 。 
GE 末 国 绚 动 “苹果 界面 差不多 上 下 都 有 菜单 安 卓 菜单 位 于 手机 硬件 上 ， 界 面 空 
间 大 ; WP 井 字形 排列 比较 多 。 
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